私はどこでも見ました。それでも、非常に「基本的な」アイデアのサンプルコードを思い付くことができませんでした。
画面サイズの90%を取得し、ブラウザーのサイズが変更されるたびに調整されるdiv(相対画面の90%を取得する)
内部のネストされたdivのサイズも変更する必要があります。
それも可能ですか?
編集:
画面を垂直方向にサイズ変更しようとすると、幅90%が機能しません。
Vh属性を使用します。ビューポートの高さを意味し、パーセンテージです。したがって、高さ:90vhは、ビューポートの高さの90%を意味します。これは、ほとんどの最新のブラウザーで機能します。
例えば。
div {
height: 90vh;
}
あなたは、体のあなたの愚かな100%のものの残りを差し控えることができます。
ヘッダーがある場合は、CSSのcalc関数を使用して、ヘッダーを考慮するなどの楽しいこともできます。
例えば。
div {
height: calc(100vh - 50px);
}
これにより、ビューポートの高さの100%からヘッダーのマイナス50pxが得られます。
このシナリオでは、外側の<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;
}
デモ
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
resize: both;
overflow: auto;
}
img{
height: 100%;
width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this 1234567891011 div
element.
</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
<img src="images/scenery.jpg" alt="Italian ">
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>