Alternative to min-height?

min-height, height percentage

[Ertai]

I'm trying to keep my page from being displayed too short.

Some of the content is rendered using ASP.NET. Which creates a table in 'Container.' The code renders correctly if the browser is full size. However, When the browser is resized to a smaller size, the content of 'Content' overflows it's area, and goes past the Footer as well.

So I added a min-height to the 'container', but this only works in FireFox (Mozilla).

Any ideas for IE/Netscape?

This is my code:

/* __ div Classes __ */ 
div.Container { 
  position: relative; 
  top: 0px; 
  left: 195px; 
  height: 100%; 
  min-height: 700px; 
  } 
div.Content { 
  position: absolute; 
  z-index:0; 
  left: 170px; 
  width: 700px; 
  height: 100%; 
  background-color: #7D420D; 
  background-image: url("MusicImages/Layout/Center_Bg.jpg"); 
  background-repeat: repeat-y; 
  background-position: top left; 
  } 
div.Menu { 
  position: absolute; 
  z-index:0; 
  left: 0px; 
  width: 170px; 
  height: 100%; 
  background-color: #7D420D; 
  background-image: url("MusicImages/Layout/L_Menu_Bg.jpg"); 
  background-repeat: repeat-y; 
  background-position: top left; 
  } 
div.Right { 
  position: absolute; 
  z-index:0; 
  left: 870px; 
  width: 9px; 
  height: 100%; 
  background-image: url("MusicImages/Layout/R_Content_Bg.jpg"); 
  background-repeat: repeat-y; 
  background-position: top right; 
  } 
div.Header { 
  position: relative; 
  z-index:1; 
  left: 195px; 
  width: 879px; 
  height: 42px; 
  background-image: url("MusicImages/Layout/Content_Header.jpg"); 
  background-repeat: none; 
  background-position: top left; 
  } 
div.Footer { 
  position: relative; 
  z-index:1; 
  left: 195px; 
  width: 879px; 
  height: 52px; 
  background-image: url("MusicImages/Layout/Content_Footer.jpg"); 
  background-repeat: none; 
  background-position: top left; 
  } 
.Music_Summary { 
  border-width: 1px; 
  border-color: #364149; 
  border-style: solid; 
  vertical-align: left; 
  padding: 12px; 
  width: 300px; 
  height: 220px; 
  } 
/* __ div Classes __ */ 

[DrDoc]

Netscape supports min-height as well. And so does Opera. However, IE doesn't, and there's really nothing you can do about it (except wait five years or so for IE to get its act together). However, there's a dirty workaround you can employ -- expressions.

However, you need to "hide" the expression from the other browsers...

[Purple Martin]

Another dirty work-around that doesn't need to be hidden from any browsers...

Make a div that has a one-pixel transparent gif in it, set the height of the image to 700px (or whatever), and position the div at top:0px;

[grahamstewart]

Yup thats the only way I have found.. but don't bother with the transparent gif. Just set the height of the div instead.

Also works for faking a minimum width.

[DrDoc]

set the height of the div

If the div has a different background than the rest of the page it will not look good in browsers other than IE (even if you specify overflow:visible). IE erroneously expands the div itself, instead of just letting the contents overflow the boundaries.