Question

我正在寻找一种解决方案，让侧边栏与内容部分的高度相同。我尝试了很多东西，但没有任何工作。正如你在小提琴中看到的那样，侧边栏不是100％作为他的父母（以及内容部分）。

CSS

  html{
      min-height:100%;  
  }
  body{
      min-height:100%;
      background-color:#eee;
  }
  #container{
      background-color:#ccc;
  } 
  aside{
      width:260px;
      float:left;
      background-color:#333;
      min-height:100%
  }
  #content{
      min-height:100%;
      margin-left:300px;
  }
  .dummy-height{
      height:2000px;
      background-color:#777;
  }

HTML

  <div id="container">     
      <aside> 
      sidebar  
      </aside>

      <div id="content">
          <div class="dummy-height">
          dummy
          </div>
      </div> 
  </div>

Answer 1

只需给元素提供绝对定位即可：

http://jsfiddle.net/94mGd/3/

  aside{
      position:absolute;
      width:260px;
      float:left;
      background-color:#333;
      min-height:100%
  }

类似问题页面（已解决）：How to make a floated div 100% height of its parent?

要解决100％高度的问题以及浮点数，请使用浮点数的父div：

<div id="floatL" style="float:left;">
  <aside> 
  sb   
  </aside>
</div>

http://jsfiddle.net/94mGd/5/

Answer 2

尝试为每个父元素添加高度：100％您尚未将此添加到#container。

#container {
      background-color:#ccc;
      height: 100%;
}

浮动侧边栏需要100％高度问题

2 个答案: