Div。合併百分比和固定尺寸

Question

可能嗎？ div「菜單」和「子菜單」需要爲50px高。 「頂部」和「底部」需要達到60％和40％。對於「top」，behinde-the-scene-calculation將爲60％ - 50px。

<div id="menu"></div> 
<div id="top"> 
</div> 
<div id="submenu"></div>  
<div id="bottom"> 
</div> 

Answer 1

CSS不會混合單位讓你說60％ - 50px - 要達到這種效果，你必須求助於JavaScript來計算大小。

如果您的div直接位於內部，則不必重新實現太多的佈局引擎 - 在文檔加載時，獲取視口大小，然後計算60％ - 50像素的像素大小，並指定作爲#top元素的高度，對於#bottom也是如此。

Answer 2

當你問你是否可以做到這一點？因爲是的，你可以

#menu, #submenu{ 
    height: 50px; 
} 
#top{ 
    height: 60%; 
} 
#bottom{ 
    height: 40%; 
} 

會發生什麼是兩個菜單將是50px，然後頂部和底部需要60和40％的頁面。很可能你會有滾動條，因爲頁面會超過100％的頁面100px，但這很可能。

您可以混合百分比，像素和ems。