css - 部門。割合と固定サイズを組み合わせる

Question

出来ますか？div の「メニュー」と「サブメニュー」の高さは 50px である必要があります。「上」と「下」は 60% と 40% である必要があります。舞台裏の計算は、「トップ」の場合、60% - 50px になります。

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

score 1 · Accepted Answer

あなたはこれを行うことができますか？はい、できるからです

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

両方のメニューが 50px になり、上部と下部がページの 60% と 40% を占めます。ページの 100% で 100px になるため、スクロールバーが表示される可能性が最も高いですが、可能性は十分にあります。

パーセンテージ、ピクセル、em を混在させることができます。

score 1 · Accepted Answer

CSS は 60% から 50px までの単位を混合しません。このような効果を実現するには、JavaScript を使用してサイズを計算する必要があります。

div が直接内部にある場合、レイアウトエンジンをあまり再実装する必要はありません。ドキュメントの読み込み時にビューポートサイズを取得し、60% - 50px をピクセル単位で計算し、それを #top として割り当てます。要素の高さ、および #bottom についても同様です。

2 に答える 2