web-dev-qa-db-ja.com

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

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

画面サイズの90％を取得し、ブラウザーのサイズが変更されるたびに調整されるdiv（相対画面の90％を取得する）

内部のネストされたdivのサイズも変更する必要があります。

それも可能ですか？

編集：

画面を垂直方向にサイズ変更しようとすると、幅90％が機能しません。

htmlautoresize
22
Urbanleg

Vh属性を使用します。ビューポートの高さを意味し、パーセンテージです。したがって、高さ：90vhは、ビューポートの高さの90％を意味します。これは、ほとんどの最新のブラウザーで機能します。

例えば。

div {
  height: 90vh;
}

あなたは、体のあなたの愚かな100％のものの残りを差し控えることができます。

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

例えば。

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

これにより、ビューポートの高さの100％からヘッダーのマイナス50pxが得られます。

41
Eric Warnke

このシナリオでは、外側の<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;
}

デモ

購入前に試す

9
insertusernamehere
  <!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>
0
Racharla Sruthi