Question

我正在尝试让.box-content div占据boxA / boxB div内的最大高度。我在boxA / boxB div内有.box-header .box-content和div。 .box-content与div共享.box-header。

在这个JSFiddle中，您可以看到.box-content超出了它的父div。

如何通过考虑这两条规则的纯CSS来解决这个问题：

.box-content的高度可伸缩（增长/缩小每当窗口大小改变时）;
.box-content的最小高度为200px;

Answer 1

您面临的问题是：

.box-content设置为其父级的100％，但父级内部还有.box-header，因此.box-content被推下并且必须溢出（.box-content的大小1}}）保持它父母的100％高度。

我可以建议这个css：

.box-content { height: 90%; }

.box-header {
    position: relative;
    background-color: green;
    padding:11px 8px 5px;
    color: white;
    height:10%;
}

请参阅 FIDDLE

Answer 2

如果overflow是一个选项（我觉得这会让你的生活变得轻松），这里有demo

保持HTML相同， css （2行更改）

.boxA {
    width: 220px;
    padding: 0px 3px 5px 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
    border: solid 1px green;
    overflow:hidden; /*added this*/
}

.boxB {
    width: 420px;
    padding: 0px 5px 5px 3px;
    float: right;
    height: 100%;
    border: solid 1px red;
    overflow:hidden;/*added this*/
}

Answer 3

如果子div具有更大的高度，您可以将父div设置为可滚动。

.boxA{ overflow:auto; } .boxB{ overflow:auto; }

让孩子占用最大高度

3 个答案: