ウィンドウの幅/高さを変更するときのdivの自動サイズ変更

Question

私はどこにでも見てきました。 まだ、非常に "基本的な"アイデアのサンプルコードはありません：

画面サイズの90％を占めるdivで、ブラウザサイズが変わるたびに調整されます相対画面）

その内部のネストされたdiv要素が同様のサイズそのものを再必要があります。..

はそれも可能ですか？

編集：私は縦のサイズに画面を再しようとすると、

幅の90％が機能していません。

Answer 1

このシナリオでは、外側の<div>の幅と高さは90％です。内側のdiv>の幅は親の100％です。ウィンドウの大きさを変更すると、両方とも拡大縮小されます。

HTML

<div> 
    <div>Hello there</div> 
</div> 

CSS

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

body > div { 
    width: 90%; 
    height: 100%; 
    background: green; 
} 

body > div > div { 
    width: 100%; 
    background: red; 
} 

デモ

Try before buy

Answer 2

vh属性を使用します。ビューポートの高さを意味し、パーセンテージです。高さ：90vhはビューポートの高さの90％を意味します。これはほとんどの現代のブラウザで動作します。

例：

div { 
    height: 90vh; 
} 

あなたの愚かな100％ものを体に残すことはできません。

ヘッダーがある場合は、CSSのcalc関数を使用して考慮してください。

例：

div { 
    height: calc(100vh - 50px); 
} 

これは、ビューポートの高さの100％からヘッダーの50pxを引いたものです。