-2

我使用以下代码创建了一个侧边栏和内容区域。

.container {
  overflow: hidden;
}

aside {
  width: 185px;
  background: lightgreen;
  float:left;
  padding:5px;
}

.content {
  background:lightblue;
  padding:5px;
  margin-left: 195px;
}

和 HTML

<div class="container">
  <aside>  
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </aside>

  <div class="content">   
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </div>

</div>

有用。但是侧边栏的高度仅限于内容区域。即使没有内容，如何为侧边栏提供全高的背景颜色？

http://jsfiddle.net/mLVBE/

4

2 回答 2

2

基本上，您将高度 100% 添加到 html、正文、容器和您的旁边。

这是一个更新的小提琴：

http://jsfiddle.net/mLVBE/3/

于 2012-10-11T15:03:14.973 回答
2

浮动可能会产生棘手的副作用。

这是我使用绝对定位的演示：

http://jsfiddle.net/mLVBE/5/

于 2012-10-11T15:07:23.443 回答