css - 如何设置元素的高度与其父元素相同

Question

我在另一个“main-content”中有一个名为“content-left”的 div。我想让 child div 假设 parent 高度的 100%。

#main_content {
display: table;
width: 99%;
margin-left: auto;
margin-right: auto;
}

#content-left {
width: 250px;
float: left;
display: table-cell;
padding-bottom: 8px;
background-color: #F6F5F4;
height: 100%;
}
#content-rightside {
width: 782px;
float: left;
display: block;
padding-left: 10px;
}

Answer 1

要使 height: 100%; CSS 规则起作用，元素的每个父元素都必须明确定义高度。这种类型的样式表可以工作:

html,
body,
#main-content,
#left-column,
#right-column
{
    height: 100%;
}

#left-column
{
    background-color: #ccc;
    float: left;
    width: 75%;
}

#right-column
{
    background-color: #eee;
    float: left;
    width: 25%;
}

这里有一个 fiddle 供您查看:http://jsfiddle.net/txReR/

更新

如果您希望高度基于内容，请像这样使用display: table:

#main-content
{
    display: table;
    width: 100%;
}

#left-column
{
    background-color: #ccc;
    display: table-cell;
    width: 75%;
}

#right-column
{
    background-color: #eee;
    display: table-cell;
    width: 25%;
}

这是更新后的 fiddle :http://jsfiddle.net/txReR/1/

请注意，这种方法的一个缺点是浏览器兼容性在使用 CSS 表格时是一个更大的问题。