Question

我有2个DIV：

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

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

感谢您的帮助。

更新：

以下是我的示例代码以及其他元素：

http://tinkerbin.com/tkp2FZLZ

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

Answer 1

在两列上使用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的内联块...他们不理解（哈！）。 display: inline; zoom: 1是他们的替代方案，或者您也可以浮动这些列并使用名为 faux-column 的技术（tl; dr背景是在父级上，它是一个视觉假，它似乎在每一列上，但它不是）
EDIT2：此类布局列通常也需要vertical-align: top。

Answer 2

为它们设置相同的高度，你甚至可以给它们一个浮点数。顺便说一句，你的html中有一个bug，就这样写：

<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

Answer 3

试试这个

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

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

Answer 4

您可以通过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

边栏高度拉伸与内容高度CSS

4 个答案: