Specified min-height and 100% height together

Question

I have been trawling the web trying to find an answer to my css nightmare question.

The main problem seems to be getting a min-height:580px and a height:100% at the same time in all the browsers.

The thing I need to achieve is:

1. Site to have a min height of 580px including footer so total height before scroll bars appear is 580px.
2. Also, a min width is needed of 930px including right and left margin of 15px each side.
3. left menu of 216px wide and 100% high minus the footer height of 30px.
4. Main part of the screen should fill all the space available. Unless the screen height is less than 580px or width less than 930px. In this case you get scroll bars.
5. Compatiblity ie6,7,8, Firefox and Safari.

Can it be done with no Javascript?

Answer 1

There may be cleaner ways, but an idea that comes to mind about the min-height (min-height isn't interpreted by IE<8 anyway):

Place an absolutely positioned, 1 pixel wide, invisible DIV in the left hand corner of the screen. Give it 580 Pixels height. That should make the height at least 580 Pixels.

The same should be possible with the horizontal width.

You should then be able to work the menu part in the usual way.

Don't forget your HTML element needs height: 100% for height: 100% to work within the body.

Answer 2

First, there's no support for min-height in IE6 or IE7 without javascript, period. So the answer to your question is no.

In general, though (and I'll admit I'm not sure since I haven't tested it thoroughly) but I seem to recall that height:100% overrides the min-height property set in pixels in browsers that do support it.

You could try using a second div either inside or outside your 100% height div that's the 580px you need...