如何将小部件的侧边栏设置为100％高度？

4 回答

• 0

  通常，100％高度的技巧是将所有父元素设置为高度：100％ .

  #wrapper, #body, html, body, body > table > tbody > tr > td { height:100%;} /* parents */
      #secondary{ height:100%;}
  
      #bottom_footer {position:relative;} /* positions footer to overlap #secondary */
  

  回复于 2024-04-29T22:23:41+08:00
• 0

  替换为此代码 realaffordableart.css

  #body1 {
      background-image: url("http://www.realaffordableart.com/images/sidebar.png");
      background-position: left top;
      background-repeat: repeat-y;
      float: left;
      height: 100%;
      margin: 0;
      width: 1000px;
  }
  

  它会解决掉！

  回复于 2024-04-29T22:23:41+08:00
• 0

  实际上这对包括我在内的其他人来说真是个大问题 . 但经过几次尝试终于做出了一些解决方案您需要为此准备一个快速的CSS调整 .

  .container { width: 100%; max-width: 1170px; margin: auto; } /*parent container*/
  .content-frame { width: 870px; border-left: solid 300px #F5F5F5; /*your frame with built-in sidebar + add clearfix class to fix the float elements*/ }
  .content-frame section { float: left; width: 100%; padding-left: 25px; box-sizing: border-box; } /*this will be your contents with spacing of 25px from the left + box-sizing will fix your padding space to the content*/
  .content-frame aside { float: left; width: 300px; margin-left: -300px; padding: 10px; box-sizing: border-box; } /*this will be your sidepanel + box-sizing will fix your padding spacing*/
  

  为此，您将拥有灵活的2列背景颜色/图像 . 最终输出将是这样的 .

  <div class="container">
    <div class="content-frame clearfix">
      <aside>Your side panel</aside>
      <section>Your content panel</section>
    </div>
  </div>
  

  希望这有帮助 .

  回复于 2024-04-29T22:23:41+08:00
• 0

  在将宽度设置为百分比的情况下，高度和宽度的表现不同，但高度最好使用固定值（像素或em） . 在大多数情况下将高度设置为百分比会产生高度0 .

  您可以编写一个简短的jQuery函数来测量每个网站访问者使用的屏幕高度，并将内联最小高度设置为该值 .

  回复于 2024-04-29T22:23:41+08:00