您可能知道，Chrome 的默认正文边距为8px.
然而，当我保留正文上的边距并将其高度设置为100%（以及 html 100%）时，这会带来问题。它获取 html 的高度并将其放置在 的上边距之后8px，并以 的下边距结束8px。然而，html 大小不适应 16 像素差异（顶部 8 + 底部 8）。
我认为这与文档流的工作方式有关，html 在正文之前分配了大小，但我不知道如何解决问题。
我认为可以解决此问题的唯一方法是 calc()在 html height 属性上进行表示法：height: calc(100% + 16px)但不起作用。如果您知道为什么不这样做，我想告诉您。
复制问题的代码：
CSS
html {
height: 100%;
background: rgb(42,69,66);
background: -webkit-linear-gradient(top, rgba(73,94,8,1) 0%, rgba(145,232,66,1) 100%) no-repeat;
}
body {
height:100%;
}
.divz {
background-color: olive;
height: 100%;
}
超文本标记语言
<body>
<div class="divz"></div>
</body>
这是一个复制该问题的 jsfiddle。请注意底部16px页面末尾和 html 末尾之间的间距。
编辑：我希望边距留在主体上。
编辑2：我尝试的另一件事是将 设置min-height: 100%为html，它确实执行了我想要的操作，但如果设置为 html，则min-height: 100%设置为body不起作用。
小智 5
html, body { margin: 0; }
body { padding: 8px; }
*, *:before, *:after { box-sizing: border-box; }