I have html,body and container div set to 100% height yet there is still a gap at top of page?

Question

@charset "utf-8";

html {
height:100%;

}

body {
background-color:#000000;
height:100%;
}

img
{  border-style: none;
}

container {
background: #EEE;
position:relative;
width:763px;
margin:auto;
min-height:100%;
border-right: 2px solid #0F0;
border-left: 2px solid #0F0; position:inherit;}

whats the deal guys? is it cause of the utf-8 i read it can leave a no width vertical gap, idk kinda shooting in the dark.

Answer 1

You have set the content height to 100%, but not removed the default margin (or padding in some browsers). This means that the content is the height of the viewport, and you get scrollbars so you can reach the bottom of it.

Set:

html, 
body { 
    margin: 0;
    padding: 0;
}

to remove the default margin/padding.