IE7 compatible 100% height

[Jack McKalling]

Hey,As an optional improvement to a mainframe technique I'm using on my website, I would like to automatically adjust the content area to the available height in the window. I'm using Chrome myself, but my standards include IE7 compatibility, besides the other browsers that already comply. Two different problems occur at different scenarios:I firstly have a main table, for the layout of a header cell at the top, menu cell as the leftcolumn, and a content cell in the remaining space. I want it to have a margin within 100% width and height of the html, body (you may reccommend using divs instead, I would like, but divs bring other complications that I come to later). I already set the table to fill the whole window area. I discarded using margins because they unfortunately don't get included in a 100% height setting. Instead, I use empty but sized cells around the main table's other cells. This makes it 100% invisibly but truely filling the complete window, and without overflowing as it would with a real margin. Secondly, I gave the header a set height, and want the content of the main table fill up the remaining space (100% of the tableheight excluding header). This should work perfectly fine if the table is still a table, and content just a cell without a height specified, because cells automatically take up remaining space horizontally as well as vertically. However, it does not work in IE7 with a DOCTYPE specified. Instead, the browser calculates the space in ratio of the height of the content in each row. Thus it ignores any height specified, unless I remove the DOCTYPE and use quirksmode instead, making it inadvertently invalid. I know IE does not expand a table's height in strict mode.Now, using divs instead of a table, a complete new problem occurs that is not consistent between the browsers either. The lack of height to include padding, margin or borders, seems present for including siblings in a parent too. I cannot set a child div to 100% of the parent's height, if that child has siblings with individual height specified. It shows the child in exactly 100% of the height of its parent, no matter if it has siblings or not. Thus the parent overflows exactly so much space as is specified for the siblings. I have played with embedding, overflowing and positioning, but I aggree that positioning should be used as a last resort. And this scenario is just a simple layout including a header, menu and some content, so I don't see a "last resort" here.Why is it so hard?

[wirehopper]

Most of my web pages and applications have several CSS files.base.css - layout and dimensions common to all pages in the site or applicationcolor.css - colors, including borders, may include images required by all pagespage.css - page-specific CSS, to ensure only the elements required for the page are delivered (intent is to speed page load)ie.css and ff.css, which include overrides for IE and Firefox respectivelyThis allows you to assemble the bulk of the page to display as well as possible in all browsers, then tweak anything that just won't work in a particular browser in the last CSS files.

[Jack McKalling]

I really don't want browser specific code, thanks..

[Jack McKalling]

Example of what I mean: http://dhost.info/profmemberone/fullheighttest.htmThe CSS part:

html, body, div.container {  margin: 0px;  padding: 0px;  width: 100%; height: 100%; overflow: hidden;}div.container {  background-color: yellow;  overflow: scroll; /* This should be "hidden", but while showing a scrollbar it can prove that content is overflowing its parent */}div.container div.header {  background-color: cyan;  margin: 0px;  padding: 0px;  width: 100%; height: 100px; overflow: hidden;}div.container div.content {  background-color: fuchsia;  margin: 0px;  padding: 0px;  width: 100%;  height: 100%; /* This overflows the container because header is also there */  overflow: auto;}

You can clearly see that the content part is overflowing its parent, as its 100% height setting does not substract the other sibling, aka the header. This problem is in all browsers, meaning I can't replace my table with divs at all. Unless someone can learn me a new technique that enables a sibling to fill the available space instead of the ignorant 100% of the parent, I'm stuck with tables and the corresponding IE7 bug. Anyone know a solution?

[wirehopper]

If you're not averse to using javascript, you could try:h=document.getElementById('dParent').clientHeight;document.getElementById('cChild').style.height=h.toString()+'px';Code isn't tested, might have syntax errors

[Jack McKalling]

Hmm, I already have a script for it. A better version in fact.But this is why I put this topic in the CSS forum, because I'd like to replace the ugly script by style. Any script causes delay, and I don't want that.So all summed up;- I would like it to be CSS-only and consist of no script- It should "work" automatical without triggers or setup- It should not use browser specific code like conditional comments or nonstandard code- It must "work" consistently and the same between IE7+, FF2+, O10+, Chrome3+- It must not rely on the use of tables- It must automatically resize when the window size or screen resolution changes- The "it" is:-- a block-level element that fills the entire height of the window-- leaving a small whitespace outside the borderbox (e.g. margin or other elements) on all sides-- allowing a header inside at its top with a specified height and full width-- allowing a menu(panel) inside at its left below the header with a specified width and remainder height-- allowing a content element to fill remaining space, AND that auto overflows to remain inside the "it".*Edit:I know this is a lot for something seemingly simple, but I always try to take the very best out of everything. I tried to have a replacement for this script I am using, already made three full html test pages with proper stylesheet etc, just to test if it could be done. If no one can help me here, I'll just have to stick what I was using before :)Oh yeah, I didn't mention the project has high demands.. It must be valid, cross-browser, clean, flexible, and a whole lot more.

[Jack McKalling]

Okay, so that is a little too complicated..Basically, (how) can you set a child of a 100% windowheight element, to fill its remaining space vertically (if there is also another sibling above it)?And I'm not looking for margining the child to cascade the other sibling from behind, I want this child to overflow:auto, without that scrollbar to disappear behind something else..

[dsonesuk]

this is very similar to a solution i posted, the problem is that i could only get the required result by using javascript, it seems to work in all IE versions 6 to 8, and firefox, it basically swap min-height for height:100%; if content less than window size and then back again if over. I tried alll different method to get this work without js with no avail, if someone can change it non js solution, i'd like to know. http://w3schools.invisionzone.com/index.ph...mp;#entry178904