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

Question

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

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

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

Answer 1

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

body {
  margin: 0;
}

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

<div></div>

Answer 2

您可以使用vh和vw：

95vw意味着它将使用95％的viewport宽度。

查看here了解更多信息。

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

<div></div>

Answer 3

您可以使用视口尺寸（vh和vw）。

你可以在这里阅读更多相关信息：Viewport units

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

<div></div>