css - 使用 CSS3，我们应该如何使用新的单位 vh、vw，并考虑到正文边距？

Question

在 CSS3 中，有这 2 个新单位：vh和vw. 所以我们可以使用

height: 80vh;
width: 60vw;

缩放 80% 视口高度或 60% 视口宽度的块。

但我认为通常情况下，默认body元素8px在所有 4 个边都有一个边距，所以我们应该如何将它纳入我们对 的使用vw，以及vh如果我们确实需要使用100vhand 100vw（或几乎那个量来掩盖宽度和高度，但工作与身体的边缘）？一些选项包括（1）将正文边距重置为0，（2）将正文边距重置为8px（以确保它在所有浏览器中都相同（3）使用height: calc(100vh - 8px)并width: calc(100vw - 16px)设置正确的高度和宽度......但8pxand16px似乎也是硬编码。有什么好的做法来处理这个问题？

Answer 1

(4) 您必须使用vh和vm单位来定义主体边距。

body {
   margin: 0.5vh 0.5vw;
}

.content {
  width: 99vw;
  height: 99vh;
}

这是确保具有 100% 的视口高度和宽度的唯一方法。

Answer 2

将元素重置body为 0 似乎是最简单和最有效的解决方案。