Skip to content Skip to sidebar Skip to footer
Home / Css / Height / Html

Css3 Height 100%

Post a Comment
I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title. I am designing a cross html5-css3 site, and trying to make it look t

Solution 1:

I couldn't make it as I were, so this is what I did.

CSS File:

body, html {border: 0px; margin: 0px; padding: 0px; 
height:100%; position:relative; width:100%;}
#head
{
 position:absolute;
 background-color: #98a;
 height: 100px;
 width:100%;
 top:0px;
}

#footer
{
 position:absolute;
 background-color: #e46;
 width:100%;
 height:20px;
 bottom:0px;
}

#content
{
 position:absolute;
 background-color: #dee;
 height:auto;
 top:100px;
 bottom:20px;
 width:100%;
}

body:

<body><divid="head">#head</div><divid="footer">#footer</div><divid="content">#content</div></body>

The important part, was that content is absolute, and top/bottom.

so, this is all. thank you :D

Solution 2:

You may try to use the min-height IE hack :

body, html {
  min-height:100%;
  height:auto !important;
  height:100%;
}

Hope this helps!

Post a Comment for "Css3 Height 100%"