我有 2 个 DIV:
<div id="sidebar"></div>
<div id="content"></div>
我如何使侧边栏 div 拉伸与内容相同的高度。
谢谢你的帮助。
更新:
这是我的示例代码和其他元素:
它在中间有一个内容 DIV 和 4 个使边框颜色不同的 div。
我有 2 个 DIV:
<div id="sidebar"></div>
<div id="content"></div>
我如何使侧边栏 div 拉伸与内容相同的高度。
谢谢你的帮助。
更新:
这是我的示例代码和其他元素:
它在中间有一个内容 DIV 和 4 个使边框颜色不同的 div。
您可以通过以下方式轻松获得您想要的结果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
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
这种布局列也经常需要。
尝试这个
#sidebar { position: relative; }
#content { position: absolute; top: 0; bottom: 0; right: 0; }
<div id="sidebar">
<div id="content">
</div>
</div>
为它们设置相同的高度,你甚至可以给它们一个浮动。顺便说一句,您的 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;
}