27

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

一个占据屏幕大小 90% 的 div，并且每当浏览器大小发生变化时它都会自行调整（占据相对屏幕的 90%）

它里面的嵌套 div 也应该调整自己的大小。

甚至可能吗？

编辑：

当我尝试垂直调整屏幕大小时，宽度 90% 不起作用。

4

4 回答 4

55

使用 vh 属性。它表示视口高度，是一个百分比。所以 height: 90vh 表示视口高度的 90%。这适用于大多数现代浏览器。

例如。

div {
  height: 90vh;
}

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

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

例如。

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

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

于 2015-04-24T17:29:51.370 回答
9

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

演示

先试后买

于 2013-09-06T20:37:05.013 回答
-1 
  <!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>
于 2018-11-29T17:18:09.360 回答
-1

代码片段：

div{height: calc(100vh - 10vmax)}
于 2019-12-21T19:30:30.557 回答