Question

我到处寻找。并且仍然无法提出一个非常“基本”想法的示例代码：

一个占据屏幕尺寸90％的div，每当浏览器尺寸发生变化时它就会自行调整（占相对屏幕的90％）

其中的嵌套div也应该自己调整大小..

甚至可能吗？

编辑：

当我尝试垂直调整屏幕大小时，

宽度90％不起作用。

Answer 1

使用vh属性。它表示视口高度，是一个百分比。因此高度：90vh意味着视口高度的90％。这适用于大多数现代浏览器。

EG。

div {
  height: 90vh;
}

你可以放弃身上剩下的100％愚蠢的东西。

如果你有一个标题，你也可以做一些有趣的事情，比如在CSS中使用calc函数来考虑它。

EG。

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

这将为您提供100％的视口高度，减去标题的50px。

Answer 2

在这种情况下，外部<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 3

  <!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>

Answer 4

代码段：

div{height: calc(100vh - 10vmax)}

更改窗口宽度\高度时自动调整大小的div

4 个答案: