Xairro.com

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:
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!

0 comments

Sorry but there are no comments for this entry. What about writing the first one?

Post comment

You can use Markdown for formatting.

Tags

100 and auto automatically because body browsers but container created creating css-file doesn't don't fills first for fun have height html important know manually many margin min-height normal now other our out people problems special there this way which with