css - 如何制作与内容div相同高度的侧边栏？

Question

代码如下:

(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/

Answer 1

您可以通过显示 #container 来做到这一点。作为表格并显示 #content和 #sidebar作为表格单元格:

#container {
    border:1px dashed #000;
    display: table;
    width: 100%;
}
#content, #sidebar {
    display: table-cell;
    width:50%;
}

检查您的 updated Fiddle .