3

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

4

3 回答 3

4

这篇关于A List Apart的优秀文章从头开始构建了这样的布局，并且还包含一些有趣的链接，指向有关该主题的其他文章，例如Faux Columns（也在 ALA 上）。

于 2010-07-07T13:27:21.360 回答
1

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

当内容被添加到下面的侧边栏单元格时，它将强制整个行展开，这反过来将迫使 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>
于 2010-07-07T13:17:14.627 回答
0

基本上只需将侧边栏的高度设置为 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>
于 2012-12-10T21:15:25.647 回答