让孩子占用最大高度

Quo*_*ter 5 html css height stretch

我正试图.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像素的最小高度;

Noo*_*tor 3

如果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*/
}
Run Code Online (Sandbox Code Playgroud)