讓子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取最大高度

回答

相關問題