我试图创建一个没有滚动条的全屏网站，但在定义边距时遇到了问题。给出一个最小的例子:
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
} <body>
<h1>Heading 1</h1>
</body>为什么我的侧边顶部的 html 元素的背景是黄色的？更令我惊讶的是，如果我在 h1 元素之前添加文本，黄色部分就会消失。
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
} <body>
Add some text and the yellow part disappears.
<h1>Heading 1</h1>
</body>有什么想法可以避免顶部的黄色部分而不在标题元素之前添加文本吗？
最佳答案
您的 body 元素是非 float block 元素，就像包含的 h1 元素一样。因此，body 元素的大小/位置会适应其子元素 h1，该子元素具有默认定义的边距 (margin-top)。
您的问题有多种解决方案，一种是使 body-element float 。这样做的好处是(与删除 h1 上的边距相比)是，即使插入了带边距的不同元素，我也会以同样的方式工作。
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}<body>
<h1>Heading 1</h1>
</body>html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}<body>
<h1>Heading 1</h1>
</body>关于没有滚动条的 HTML 全屏端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37988371/