让子div取最大高度

我试图让.box-contentdiv取最大高度，留在boxA/boxB div内部。我在箱子A/boxB div内部得到了div.box-header和.box-content。 .box-content与.box-header共享div。让子div取最大高度

在这个JSFiddle你可以看到.box-content超出它的父母div。

我怎样才能解决这个纯CSS考虑在帐户这条规则：

的.box-content被拉伸的高度（放大/缩小每当窗口大小的变化）;
.box-content的最小高度为200px;

来源

2013-12-16 Quoter

我不明白包括bootstrap和不使用它。 – Morpheus

'.container'来自引导:) – Quoter

如果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*/ 
}

来源

2013-12-16 11:59:05 NoobEditor

花了我一段时间才得到这个工作。还有其他的东西搞砸了。谢谢！ – Quoter

你所面对的问题是：

.box-content被设置为它的父100％，但也有个.box-header是父如此.box-content下推内部，并具有溢出（大小.box-content）保持其父母的100％身高。

我可以建议这个CSS：

.box-content { height: 90%; } 

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

看到这个FIDDLE

来源

2013-12-16 11:52:45

更新了小提琴（忘记了昏迷的响应高度昏迷） –

我知道这一点，但它是为了说明我想完成的事情：D必须说，标题需要被修复。可伸缩的标题看起来非常难看。谢谢你的帮助！ +1 – Quoter

你可以设置父div的是在孩子div有一个更大的高度的情况下滚动。

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

来源

2013-12-16 11:53:31 saintybalboa

让子div取最大高度

回答

相关问题