按高度百分比設置多個div以填充父div

我有一個最大高度/寬度設置的父級div。我想知道是否可以設置兩個孩子divs自動調整他們的高度基於一個百分比使用只是CSS？按高度百分比設置多個div以填充父div

HTML：

<div id="parent"> 
    <div id="top"></div> 
    <div id="bottom"></div> 
</div>

CSS：

html, body { 
    height: 100%; 
    width: 100%: 
}  

#parent { 
    max-width: 400px; 
    max-height: 600px; 
} 

#top { 
    height: 30%; 
} 

#bottom { 
    height: 70%; 
}

這樣做的期望實現將是成比例地填滿屏幕高度，而不強迫垂直滾動移動顯示器。

編輯：我現在認識到，如果你有一個固定的父母身高，父母的身高百分比將工作。問題仍然存在，是否有一種方法可以使用CSS來實現與屏幕大小相匹配的靈活高度。似乎這隻會使用CSS並且需要JS干預。

來源

2013-07-10 Josh

你必須設置父的高度：http://jsfiddle.net/dimitardanailov/T5yg7只能用最大高度不工作 –

啊，所以沒有辦法（不使用js）調整和重新調整大小，無需在css中明確設置高度？ – Josh

#parent必須有一定的身高值。 –

Theres沒有錯你的代碼。只需在div上添加100％的高度和寬度即可獲得您想要的效果。最大寬度/高度不強制任何值（在自動時留下高度/寬度）。這裏是工作提琴：

http://jsfiddle.net/b6HVa/

#parent { 
    width: 100%; 
    height: 100%; 
    max-height: 600px; 
    max-witdh: 400px; 
}

來源

2013-07-10 04:13:20

雖然你說的是100％正確的，但我的問題有點不同。如果我的屏幕高度低於600像素，該怎麼辦？如果我設置600px的滾動高度會發生（這是我不想要的）。 – Josh

我已經用解決方案更新了我的答案。 –

這看起來工作:)讓我試試看，我們會看到會發生什麼。 – Josh

我覺得你是對的，如果有什麼問題，請演示一下。或嘗試設置

#top{max-height: 30%;} 
#bottom{max-height: 70%;}

或將min-height: {some value}px;添加到您的div。

來源

2013-07-10 04:10:56

最小高度在這個例子中不起作用：http://jsfiddle.net/dimitardanailov/T5yg7/1/ –

正如你的評論，你是有趣的沒有高度父母的div，所以我已經放置了最小高度，但你也需要爲你的子div設置min-height。因此建議您在父div中設置高度。 –

按高度百分比設置多個div以填充父div

回答

相關問題