Forum Moderators: not2easy
I know this is not new, but I am having problems with <div> tags and their id CSS styles containing 'height:100%'--it just won't stretch to 100%, only to ~200px.
I have a placeholder in the container div which in turn relies on the correct height of the container.
IE displays fine, but there are rumors IE, not FF, has a false implementation. (So if the result is okay, I's prefer the wrong solution all the way)
Any ideas?
If you could post a bit of your styles it would help. Sometimes it isn't the style that you think it is causing the problem. So post some of your style and some of your xhtml/html. First though, validate your css and xhtml/html.
Also, I dont' belive that the height 100% is actually supported by some of the browsers. I know that someone more seasoned would be able to tell you better on that one.
4css
there are rumors IE, not FF, has a false implementation
This may be a situation in which it's merely a different implementation, and not necessarily a wrong one on IE's part.
In most situations with 100% height (as 4css points out, we would need to see the code to know for sure about your case), the problem is in making sure that the browser knows what you want the div to be 100% of.
In Quirks mode (IE and Opera when you page has no doctype), height 100% on an uncontained element will stretch the full height of the viewport. This is because in non-standard situations (again, no doctype), the body element automatically fills the viewport. So a div inside the body element, set to 100%, will be 100% of the whole viewport.
In Standards mode (which happens when you add a full and valid doctype to your page), the body element does not fill the viewport. Instead, it's default height setting is auto, just like all the other block level elements on the page. So setting the same div inside the body to 100% doesn't work, because body's height is being determined by it's content (ergo, the div's 100% is equal to 100% of it's own content).
To fix this, you have to tell the browser to set the body's height to 100% of the viewport. So adding..
body{height:100%;}
..does the trick.
Except, it doesn't. This is where the broswer difference comes in. The body element is nested inside of the html element. In IE/Standards Mode, the html element is thought to fill the viewport, much as body does in Quirks mode. So setting the body to 100% height works for IE.
But not so in other browsers, like FF and Opera (I think). These browsers give html a default height of auto, as well, putting us back to square one: a div that is 100% of the body, which is 100% of the html, which is being height-defined by the content.
But if we add...
body, html{height:100%;}
...we've now set the 100% height all the way up the document tree, so that the top level parent element is drawing it's height setting relative to the viewport; and that relative size cascades down to the div.
cEM
