让孩子占用最大高度

Question

我正试图.box-content div在boxA/boxB内留下最大高度div.我有一个div .box-header和.box-contentBOXA /盒B内div.该.box-content是分享div与.box-header.

在这个JSFiddle中你可以看到它.box-content是在它的父元素之外div.

如何使用纯CSS来解决这个问题,并考虑到以下两条规则:

1. .box-content可拉伸的高度(每当窗口尺寸改变时生长/收缩);
2. 在.box-content具有200像素的最小高度;

Answer 1

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

保持 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*/
}