我有 2 个 DIV：
<div id="sidebar"></div>
<div id="content"></div>
如何让侧边栏 div 拉伸到与内容相同的高度。
感谢您的帮助。
更新：
这是我的示例代码以及其他元素：
它在中间有一个内容 DIV 和 4 个使边框颜色不同的 div。
【问题讨论】：
<div="id="content">改成<div id="content">
您可以通过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
【讨论】：
试试这个
#sidebar { position: relative; }
#content { position: absolute; top: 0; bottom: 0; right: 0; }
<div id="sidebar">
<div id="content">
</div>
</div>
【讨论】：
在两列上都使用display: table-cell。
这将（视觉上！并且仅视觉上。它是 CSS）使它们的行为方式与 th/td 单元格相同。您可以在父级上添加table-layout: fixed; display: table 并在一个或两个列上添加一些宽度以使用 other 表算法，该算法不会尝试适应内容但尝试尊重您想要的宽度。
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;dr 背景在父级上，这是一个视觉假象，看起来在每一列上，但不是）
EDIT2：vertical-align: top 也经常是此类布局列所必需的。
【讨论】：
为它们设置相同的高度，你甚至可以给它们一个浮动。 顺便说一句，您的 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;
}
Example
【讨论】：