Question

我的HTML中有一个body标记应该填满整个页面（整个html标记所以），但它在页面顶部和顶部之间显示一些像素body代码。

奇怪的是，如果我在我的CSS中强制使用body {padding: 0;}，那么body无法填充的页面顶部仍有一个小栏，而如果我设置{{1}对于任何非零值，padding覆盖了小条，并且应用了指定的填充。

这是我的琐碎CSS（用body填充body和普通内容的div HTML标记的样式：

html {
    height: 100%;
    margin: 0;
    padding: 0; // this is ok, html fills the whole page
}

body {
    margin: 0;
    height: 100%;
    padding-top: 1px; // here, if I write padding:0;, space at the top will not be filled by body
}

修改

这是我的HTML，我不知道它是否有用。

<body>
    <div id="container">

    <header id="page_header">
        stuff
    </header>

    <section id="page_content">
        stuff
    </section>    

    <footer id="page_footer">
        stuff
    </footer>

    </div> <!-- end of div#container -->
</body>

注意：我正在使用Firefox和Chrome，行为相同。

Answer 1

您可以尝试清除html和body标签CSS规则，只需输入：

/* basic CSS reset */
* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

身体标签表现不正常

修改

1 个答案: