Question

这是一个快速模型来创建一个完整大小的网页，但每当我测试它时，屏幕顶部会有一小块空间。

如何摆脱顶部的这个小空间？

HTML

<body>
<div id="container">
    <header id="header">
        <div class="header_container">
            <h1 class="header_logo">Blog</h1>
            <nav class="menu_nav">
            </nav>
        </div>
    </header>
</div>
</body>

CSS

body,html {
    margin: 0;
    height: 100%;
}

#container{
    height: 100%;
    width: 100%;
    background-color: orange;
}

#header {
    width: 100%;
    height: 80px;
    background-color: green;
}

.header_container{
    margin-left: 50px;
    margin-right: 50px;
}

Answer 1

这是由h1顶部的边距引起的。

要解决此问题，请为标题添加overflow:hidden属性以使标题更高，或使用margin-top:0删除h1的边距。

JSFiddle：http://jsfiddle.net/jdwire/8QV4f/

HTML / Body不会封装整个高度

1 个答案: