Question

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

.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/

Answer 1

基本上你将高度100％添加到html，body，container和你的旁边。

这是一个更新的小提琴：

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

Answer 2

花车可能会产生棘手的副作用。

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

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

使用float的html / css边栏

2 个答案: