html - 如何让 div 用边距填充视口(viewport)？

Question

我正在研究 CSS 单元和盒子模型。我正在寻找一种最简单的方法，让 div 仅使用纯 CSS 属性(无 Flexbox、网格)填充视口(viewport)(带有一些边距)，并且不让 div变得大于视口(viewport)(无滚动条)。

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>