CODEWITHSUNDEEP
htmlcss
TheSunny
TheSunny

Reputation: 381

HTML/Body does not encapsulate entire height

This is a quick mock-up to create a full-size webpage, however whenever I test this, a small margin of space is present at the top of the screen.

How can I get rid of this small space at the top?

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;
}

Upvotes: 4

Views: 159

Answers (1)

Joshua Dwire
Joshua Dwire

Reputation: 5443

This is being caused by the margin on the top of the h1.

To fix this, either give the header a property of overflow:hidden to make the header taller, or remove the margin of the h1 using margin-top:0.

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

Upvotes: 5

Related Questions