Div。プレセントと固定サイズを組み合わせる

Question

可能ですか？ div "メニュー"と "サブメニュー"は50pxの高さである必要があります。 「トップ」と「ボトム」は60％と40％である必要があります。ビハインドシーンの計算は、「トップ」の場合は60〜50ピクセルになります。

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

Answer 1

CSSは、この効果のようなものを実現するために60％〜50pxという単位を混在させていないため、サイズを計算するためにJavaScriptを使用する必要があります。

もしあなたのdivが直接内部にあるならば、レイアウトエンジンをあまりにも多く実装する必要はありません。ドキュメントの読み込み時にビューポートサイズを取得し、次に60-50pxをピクセル単位で計算し、 #top要素の高さ、#bottomの場合も同様です。

Answer 2

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

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

である可能性があるため、両方のメニューはは50pxになり、その後、上部と下部には、ページの60と40％を取ります。ほとんどの場合、スクロールバーが表示されるのは、ページがページの100％を100％超えるためですが、非常に可能です。

パーセント、ピクセル、およびemを混在させることができます。