当仅包含 h1 元素时，全屏 div 会向下移动答案

【问题标题】：full-screen div is shifted down when contains h1 element only当仅包含 h1 元素时，全屏 div 会向下移动
【发布时间】：2014-03-07 04:08:44
【问题描述】：

我无法使用 h1 元素创建具有全屏 div 的页面。

IE 和 Chrome 按预期正确呈现以下页面：包含红色全屏 div，没有滚动条：

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <style>
        html {
            background-color: purple;
        }
        body {
            background-color: blue;
            height: 100%;
            margin: 0;
        }
        #main {
            background-color: red;
            min-height: 100%;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1>
            some text
        </h1>
    </div>
</body>
</html>

但是，对于 Firefox (27.0.1)，我发现：

在页面顶部显示紫线
和垂直滚动条
如果我在 h1 元素之前直接向 #main div 添加一些文本，则页面会按预期呈现。

我应该怎么做才能在 FireFox 中正确渲染它，只在 h1 中使用文本？

【问题讨论】：

标签： html css fullscreen

【解决方案1】：

IE 和 Chrome 按预期正确呈现以下页面：包含红色全屏 div

如果这就是你得到的，那只能在怪癖模式下，我想——因为你忘记为html 设置height:100%，并且没有body 的百分比高度不是应该以这种方式工作。

如果设置了正确的 Doctype（以及 html 的高度），您在所有符合标准的浏览器中都会得到相同的结果——您认为的那个是错误的：http://jsfiddle.net/q6g8Q/1/

这实际上是正确的，因为 adjoining margins - 浏览器样式表中 h1 的默认 margin-top 与 div 的边距顶部相邻 - 因此它被相应地向下推。

所以将h1的margin-top设置为零，“问题”就消失了——http://jsfiddle.net/q6g8Q/2/

【讨论】：

【解决方案2】：

您必须重置浏览器的 CSS。只需将其添加到 CSS 的顶部即可：

* {
    margin: 0;
    padding: 0;
}

// #main h1 { margin:0; } // this snippet will be enough for your case, but with the other you remove every margin and padding made by the browser.

demo JsFiddle

如果您想了解有关此技巧的更多信息，请阅读 Chris Coyier 的 this article。

如果你想要一个完整的 CSS 重置，你应该考虑Reset Reloaded。

【讨论】：

@jozef 你应该阅读 CBroe 的answer。我没有花时间回答问题的第二部分；他做到了。顺便说一句，他提供的信息比我多。

【解决方案3】：

更改行高或边距填充。这应该够了吧。玩一些大数字;)

【讨论】：