如何让div用边距填充视口？

Question

我正在研究CSS单元和盒子模型。我正在寻找一种最简单的方法让div只使用普通的CSS属性（没有flexbox，网格）来填充视口（带有一些边距），并且不让div大于视口（无滚动条）。

＆＃13;

＆＃13;

div {
  width: 95%;
  height: 95%;
  margin: auto auto;
  background-color: #128c7e;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以用calc和vw，vh一起做。

＆＃13;

＆＃13;

body {
  margin: 0;
}

div {
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  margin: 20px;
  background-color: teal;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用vh和vw：

95vw表示它将使用viewport宽度的95％。

查看here了解更多信息。

div { 
  width: 95vw;
  height: 95vh;
  margin: auto auto;
  background-color: #128c7e; 
}

<div></div>

Answer 3

您可以使用视口尺寸（vh＆amp; vw）。

您可以在此处详细了解：Viewport units

div {
  width: 95vw;
  height: 95vh;
  margin: auto auto;
  background-color: blue;
}

<div></div>