Question

我无法使用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中的文字？

Answer 1

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

如果这就是你得到的，那么我认为这只能是Quirks模式 - 因为你忘了为height:100%设置html，而没有body的{{1}}不是假设以这种方式工作。

使用正确的Doctype集（以及html的高度），您可以在所有符合标准的浏览器中获得相同的结果 - 您认为的错误：http://jsfiddle.net/q6g8Q/1/

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

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

Answer 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。

Answer 3

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

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

3 个答案: