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

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

2 个答案: