html - 変更 - jquery ウィンドウサイズ



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

私はどこにでもいました。 それでも非常に「基本的な」アイデアのサンプルコードを思いつくことはできませんでした。

画面サイズの90%を占めているdivで、ブラウザサイズが変更されたときに調整されています(相対画面の90%を占める)

その中のネストされたdivは、同様にサイズを変更する必要があります..

それは可能ですか?

編集:

画面の縦のサイズを変更しようとすると、幅90%が機能しません。


Answer #1

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

例えば。

div {
  height: 90vh;
}

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

ヘッダーがある場合は、CSSのcalc関数を使って考慮に入れるような楽しいこともできます。

例えば。

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

これにより、ビューポートの高さの100%からヘッダーの50ピクセルを引いた値が得られます。


Answer #2

このシナリオでは、外側<div>の幅と高さは90%です。 inner 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;
}

デモ

買う前に試してください





autoresize