Question

我有一个应用程序要求我使用CSS将<html>和<body>标记的高度设置为100％，就像这样（JSFiddle version）：

html, body {
  display: block;
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

body {
  background-color: #141414;
  overflow-x: hidden;
  overflow-y: auto;
}

我已经包含了这些标签样式的所有CSS。但是，我始终有一个滚动条，允许我向下滚动约20px，无论页面的内容有多大或多小。这个问题在任何规模的碎片上都会持续存在。

我可以在这些截图中看到原因。请注意，正文的ID为#container，但这仅用于JS定位，而不是CSS样式：

enter image description here

同一页面的3D视角，显示<body>标记从<html>标记的顶部向下滑动：

enter image description here

由于我在这些标记中没有任何边距或填充，并且由于页面顶部附近的HTML元素都没有任何边距或填充以向下推动<body>标记，因此我我真的卡住了。

如何修复CSS以使<body>标记与页面顶部齐平？

感谢您的时间。

Answer 1

尝试

header {
    margin: 0px 17% 0px 17%;
}

Answer 2

最可能的原因是collapsing margins。您可以通过向您的身体添加padding: 0.01px来“修复”此问题。

希望我第二次尝试回答这个问题并不像我的第一次XD那样愚蠢

Answer 3

好像您在<html>和<body>之间有新行或空格...

试试这个：

<html><body>
    ...
</body></html>

而不是：

<html>
<body>
    ...
</body>
</html>

和标签100％高度失败

3 个答案: