html - 侧边栏高度拉伸与内容高度 CSS

Question

我有 2 个 DIV：

<div id="sidebar"></div>
<div id="content"></div>

我如何使侧边栏 div 拉伸与内容相同的高度。

谢谢你的帮助。

更新：

这是我的示例代码和其他元素：

http://tinkerbin.com/tkp2FZLZ

它在中间有一个内容 DIV 和 4 个使边框颜色不同的 div。

Answer 1

您可以通过以下方式轻松获得您想要的结果display:table-cell;

HTML

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

<div id="content">content</div>

CSS

#sidebar {
display:table-cell;
width:100px;
background:red;

}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}

我认为你看起来像这样；- http://tinkerbin.com/yqyX3mXg

Answer 2

display: table-cell在两列上使用。

这将（视觉上！并且仅视觉上。它是 CSS）使它们的行为方式与th/td单元格相同。您可以table-layout: fixed; display: table在一个或两个列上添加父级和一些宽度以使用其他表算法，该算法不尝试适应内容但尝试尊重您想要的宽度。

HTML：

<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>

CSS：

#sidebar, #content {
  display: table-cell;
}

编辑：与 IE8+ 兼容
您必须对 IE6/IE7 使用 inline-block ......他们不明白（哈！）。display: inline; zoom: 1是他们的替代品，或者您也可以浮动这些列并使用名为faux-column的技术（tl；博士背景在父级上，这是一个视觉假货，它似乎在每一列上，但不是）
EDIT2:vertical-align: top这种布局列也经常需要。

Answer 3

尝试这个

     #sidebar { position: relative; }
     #content { position: absolute; top: 0; bottom: 0; right: 0; }

     <div id="sidebar">
     <div id="content">
     </div>
     </div>

Answer 4

为它们设置相同的高度，你甚至可以给它们一个浮动。顺便说一句，您的 html 中有错误，请这样写：

<div id="sidebar"></div>
<div id="content"></div>​

和CSS：

#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}

#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}

​示例