Holger Holger - 5 months ago 10
CSS Question

HTML full screen side without scrollbars

I tried to create a full screen website without scrollbars and have problems defining the margins for that. Given is a minimum example:



html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}

body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}

h1 {
background: gray;
}

<body>
<h1>Heading 1</h1>
</body>





Why do I get the yellow background of the
html
element in the top of the side? Even more surprising to me is that the yellow part disappears, if I add text before the
h1
element.



html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}

body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}

h1 {
background: gray;
}

<body>
Add some text and the yellow part disappears.
<h1>Heading 1</h1>
</body>





Is there any idea to avoid the yellow part in the top without adding text before the heading element?

Answer

Your body element is a non-floating block-element, just as the contained h1 element. Therefore the size/position of the bodyelement adapts to its child-element h1, which has a margin (margin-top) defined as default.

There are multiple solutions for your problem, one is to make the body-element float. The advantage of this is (compared to removing the margin on the h1) is, that i will work the same way, even if a different element with a margin is inserted.

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
    float: left;
    width: 100%;
}

h1 {
    background: gray;
}
<body>
        <h1>Heading 1</h1>
    </body>

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: yellow;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
    background: green;
    float: left; 
    width: 100%;
}

h1 {
    background: gray;
}
<body>
        <h1>Heading 1</h1>
    </body>

Comments