Question

我有一个包含两个其他div的主div。我需要第一个必须具有父div的相同高度。 CSS中未指定父div高度。

以下是一个示例：http://jsfiddle.net/x8dhnh4L/ 粉色div必须扩展到父级的全高（红色边框）。

我尝试过的一个解决方案是使用display:flex，但它不是IE友好的（我需要兼容IE8 +）。另外我只想用CSS实现这一点，所以我要避免使用JS。

Answer 1

您可以尝试使用表格布局：

在父级

将display：table-cell设置为需要相同高度的子项

#container {
    position: relative;
    width:600px;
    border: 1px solid red;
    display:table;
}

#content {
    display: table-cell;
    background-color:pink;
    width:400px;
}

#side-bar {
    display:table-cell;
    background-color:yellow;
    width:170px;
    padding-left:25px;
    vertical-align: top;
}

这是一个工作小提琴： http://jsfiddle.net/x8dhnh4L/2/

如评论中所述，边距不适用于display:table-cell的元素。如果可以接受，您可以使用padding-left代替margin-left ... 您还可以添加额外的<div>以将2列分隔为25px。

Answer 2

http://jsfiddle.net/x8dhnh4L/1/

将侧栏设为

float:right;

并设置内容

height:100%;

Answer 3

快速解决方案是display:table使用#container，height:100%使用#content。

http://jsfiddle.net/afelixj/x8dhnh4L/5/

Answer 4

如果您确实希望“#content”div扩展为“#container”高度，则需要为父级“#container”设置高度，为“#content”设置height和float

#container {
    position: relative;
    width:600px;
    border: 1px solid red;
    height: 800px; //whatever height you need
}

#content {
    display: inline-block;
    background-color:pink;
    width:400px;
    height:100%;
    float: left;
}

这样“#content”高度将调整为“#container”高度，但“＃side-bar”将采用显示其内容所需的高度。

使用Hanoncs解决方案，父div“#container”将调整为孩子的div“#content”高度。

Answer 5

一个简单的方法是在父元素上使用display: table;声明，在子元素上使用display: table-cell;声明。

我建议阅读Equal Height Columns with Cross-Browser CSS and No Hacks。

希望这有帮助！

使div高度等于其父级（100％）

5 个答案: