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

Question

我到处都看.仍然无法提出一个非常"基本"的想法的示例代码:

一个占据屏幕大小90%的div,每当浏览器大小发生变化时它就会自行调整(占相对屏幕的90%)

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

它甚至可能吗？

编辑:

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

Answer 1

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

例如.

div {
  height: 90vh;
}

你可以放弃身体其他100%愚蠢的东西.

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

例如.

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;
}

演示

买前先试试