Question

我需要一个侧边栏和一个内容区域。我希望两个部分都有相同的高度。因此，如果我想为侧边栏指定背景颜色，即使侧边栏的内容不如内容部分那么高，它也将遵循内容区域，反之亦然。我想在纯HTML和CSS中制作它，所以没有javascript技巧。

Answer 1

This excellent article A List Apart 从头开始构建这样的布局，还包含一些有关该主题的其他文章的有趣链接，例如Faux Columns（也在ALA上））。

Answer 2

以跨浏览器方式执行此操作的唯一真正方法是使用表格。

当内容被添加到下面的侧边栏单元格时，它将强制整个行展开，这反过来将强制contentArea单元格也展开。您可以使用css单独设置样式。

<style>
  #sideBar { vertical-align:top;}
  #contentArea { vertical-align:top;}
</style>
<table>
  <tr>
    <td id="sideBar">SideBar</td>
    <td id="contentArea">content area</td>
  </tr>
</table>

Answer 3

基本上只需将侧边栏的高度设置为100％，它将遵循父元素的高度。在下面的示例中，它是容器元素。无论高度如何，侧边栏的高度都是100％，因此始终与容器的高度相同。

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

<style>
#wrapper {}
#container {min-height:500px;}  (or whatever you want for the height)
#sidebar {height:100%;}
</style>

HTML / CSS：如何使侧边栏和内容相互跟随

3 个答案: