如何使边栏与内容div相同的高度？ [英] How to make sidebar with same height as the content 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屋！