Forum Moderators: not2easy
I've read all around about the different techniques to try to make the "height" of a <div> be 100%. But translating what is found to concrete changes is escaping me.
I am working on a site where I want to have a "main" div that all content is inside of. I want this div to be 100% of the screen height, and more if needed. Here is the gist of my CSS:
body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #A2CCA2;
}
#main
{
width: 59em;
height: 100%;
min-height: 100%;
text-align: left;
background: #E8F9E8;
border-left: 2px solid #339933;
border-right: 2px solid #339933;
padding: 1em;
margin: auto;
}
My XHTML is valid 1.1 markup, which is good.
So, in IE, this stretches 100% of the screen.
In FireFox, it does not. The div ends where ever the last line of content is.
Any ideas from the group?
There is a difference between browsers about where the body tag is in the heirarchy. I'm not fact checking this at the moment, but if I recall correctly IE relates the dimensions of <body> to the dimensions of the viewport, while FF treats <body> like any other tag (content defined height) and relates the dimensions of <html> to the viewport.
So 100% height on the body in IE makes it 100% of the viewport, but in FF 100% height on the body merely makes it 100% of the <html> tag. If the <html> tag is not then set to 100% the height of the viewport, it's no dice.
body, html{height:100%;}
...should get you closer to what you want.
cEM
