CSS: 100 percent height
Many people have problems with creating a CSS-layout which has 100% height, but there is a special way to do it.
First we want to remove the margin automatically created by the browser. So we have to write the following into our CSS-file:
Because html and body don't, by default, have a height of hundred percent, we have to do this manually:
Now we need a container which fills out the complete height:
That's it. Have fun!
1 2 3 4 | body, html
{
margin:0;
}
|
Because html and body don't, by default, have a height of hundred percent, we have to do this manually:
1 2 3 4 5 6 | body, html
{
margin:0;
height:100%; /* Because the IE doesn't know min-height */
min-height:100%; /* For other browsers */
}
|
Now we need a container which fills out the complete height:
1 2 3 4 5 6 7 8 9 10 11 12 | body, html
{
margin:0;
height:100%; /* Because the IE doesn\'t know min-height */
min-height:100%; /* For other browsers */
}
#container
{
min-height:100%;
height:auto !important; /* For normal browsers */
height:100%; /* For IE */
}
|
That's it. Have fun!
Post comment
Zum Kommentieren musst du angemeldet sein.
0 comments
Sorry but there are no comments for this entry. What about writing the first one?