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

我需要一个侧边栏和一个内容区。我希望两个部分的高度相等。因此，如果我想为边栏指定背景颜色，它将跟随内容区域，即使边栏的内容没有内容部分那么高，反之亦然。我只想在纯HTML和CSS中实现这一点，因此没有javascript技巧。

以跨浏览器方式实现这一点的唯一真正方法是使用表

当内容添加到下面的边栏单元格时，它将强制整行展开，而这反过来又将强制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>

#侧边栏{垂直对齐：顶部；}
#contentArea{垂直对齐：顶部；}
边栏
内容区

在一个列表上，Apart从头开始构建这样一个布局，还包含一些关于这个主题的其他文章的有趣链接，例如（也在ALA上）。

基本上只需将侧边栏的高度设置为100%，它将跟随父元素的高度。在下面的示例中，它是container元素。无论它的高度如何，侧边栏的高度都是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>

#包装器{}
#容器{min height:500px；}（或任何您想要的高度）
#边栏{高度：100%；}
< /代码>是的，我也知道这一点，但是例如，当我在边栏上写更多内容时，内容部分将在页面的中间，我的意思是在边栏的中间。或者我做错了什么？请参阅更新。如果对单元格应用垂直对齐：顶部，则内容将与单元格顶部对齐。不要这样做。表格用于表格数据，而不是布局。使用style=“vertical align:top”对于每个人，我是一名后端开发人员，但每当我做一些迫使我进入前端的辅助项目时，我都必须立即做出这个决定。在我看来，这两个选择都很丑陋。使用各种疯狂的黑客和复杂性真的让我畏缩。用一个结构来做它本不该做的事情也让我感到畏缩。最后，我似乎总是喜欢这张桌子。它可能很难看，但至少理解起来非常简单，并且需要大约5秒钟的时间来实现。不管怎样，这就是我喜欢后端编码的原因——即使看似简单的事情在这里也有宗教战争。也谢谢你的提示，有趣的技术。你可以不用javascript来做：是的，html/样式代码的数量是html/样式代码的20倍，并且保证您将在几天内只处理这一部分，试图找出为什么它在某些浏览器中不起作用，而表标记正是针对这个问题构建的……这是次优的，因为它涉及不必要的嵌套
元素和一些非常丑陋的CSS技巧，但是它比Chis的基于表格的解决方案要好。@Chris:
元素不是为了解决这个问题而构建的。它是用来显示表格数据的。@You:请引用？我的建议是：