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

Question

我在另一个“主要内容”中有一个名为“content-left”的 div。我想让孩子 div 假设父母身高的 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%;
}

这里有一个小提琴供你看：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%;
}

这是更新的小提琴：http: //jsfiddle.net/txReR/1/

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

Answer 2

这是一个常见问题，这里有一个专栏解释了如何实现目标

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks