如何使边栏与内容div相同的高度? [英] How to make sidebar with same height as the content div?
本文介绍了如何使边栏与内容div相同的高度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
代码如下:
(CSS)
#container {
border:1px dashed #000;
overflow:hidden;
}
#content, #sidebar {
float:left;
width:50%;
}
#content {
background:yellow;
}
#sidebar {
background:grey;
}
#sidebar {
height:100%;
}
(HTML)
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<div id="sidebar">
<p>Few words</p>
</div>
</div>
我想看一个 #sidebar
div具有相同的高度,像 #content
div,是否可能没有绝对位置?在线版本: http://jsfiddle.net/yJbUW/
I would like to see a #sidebar
div with same height, like the #content
div, is it possible without absolute position? Online version: http://jsfiddle.net/yJbUW/
推荐答案
你可以通过显示 #container
code>和 #sidebar
作为表格单元格:
You can do that by displaying the #container
as table and displaying #content
and #sidebar
as table-cells:
#container {
border:1px dashed #000;
display: table;
width: 100%;
}
#content, #sidebar {
display: table-cell;
width:50%;
}
检查您的 updated Fiddle 。
这篇关于如何使边栏与内容div相同的高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文