HTML / CSS：如何使边栏和内容相互关联 [英] HTML/CSS: How to make the sidebar and content follow each other

问题描述

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

I need a sidebar and a content area. I want to have equal height for both sections. So if I want to specify a background color for the sidebar, it will follow the content area even if the sidebar's contents are not as tall as the content section and vice versa. I want to make this in pure HTML and CSS only, so no javascript tricks.

推荐答案

唯一真正的方法是在一个跨浏览器的时尚是与表。

The only real way of doing this in a cross browser fashion is with tables.

当内容被添加到下面的侧栏单元格时，它将强制整行扩展，从而强制contentArea单元格也扩大。您可以使用css单独设置这些风格。

As content is added to the sidebar cell below, it will force the entire row to expand which in turn will force the contentArea cell to expand as well. You can style those individually with 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>

这篇关于HTML / CSS：如何使边栏和内容相互关联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！