如何让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>

​