Need workaround for min-height in IE

Hey, good luck. When you find out how to do it let us all know.

I guess there is a javascript solution but I have never used it.

I'm not sure I understand what you mean but height:100% in IE acts the same as min-height for FF just feed the rule to IE only, as FF will read it as no more than 100%.

Hugo.

I think he is saying he wants his divs to fill the height of the window regardless of how much content is in there.

Yes so......height:100% in IE will fill the viewport if height:100% is defined in the body :?

Hugo.

I'm actually having the exact same problem at the moment (I think :oops: )

My site (http://www.bigtoque.com/test) looks fine in IE, but in FF, if the content is less than 100% of the height of the screen, the DIV only fills to the bottom of the content.

I could really use some help also.

/*huts.bigtoque.com Stylesheet*/

html, body {
  min-height: 100%;
}

* html, * body {
  height: 100%; /* IE ONLY */ 
}


body {
  margin: 0px;
  padding: 0px;
  background-color: #3a6ea5;
  color: #666666;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 1em;
}

#wrapper{
  background-color: #3a6ea5;
  height: 100%;
  width: 780px;
}

#logo{

}

#navbar {
  margin-top: -3px;
  width: 125px;
  float: left;
}

#navbar a:link, #navbar a:visited {
  display: block;
  color: #7e7e7e;
  background-color: #ffffff;
  border-bottom: 1px solid #000000;
  padding-top: 3px;
  padding-bottom: 3px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}

#navbar a:hover {
  background-color: #dedede;
}

#valid a:link, #valid a:visited, #valid a:hover {
  display: block;
  background-color: #3a6ea5;
  border: 0px;
}

#main {
  width: 633px;
  height: 100%;
  background-color: #ffffff;
  float: left;
  margin-top: -91px;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 10px;
  background: url(images/bgPage.jpg);
}

#main h1 {
  text-align: center;
}

#news {
  width: 292px;
  float: left;
  padding: 10px;
  padding-top: 0px;
  background-color: #dedede;
}

#news ul{
 margin: 10px;
 font-size: .9em;
}

#recap {
  width: 292px;
  float: right;
  padding: 10px;
  padding-top: 0px;
  background-color: #dedede;
}

#recap ul{
 margin: 10px;
 font-size: .9em;
}

table, tr, td{
  border: 1px solid #000000;
}

[/code][/url]

BigToque,
not sure what problem you having, define:

html, body {height:100%;min-height;100%;}

On a container wishing to have full viewport height
For Mozi use min-height:100%; height:auto;

/*hide fromIEMac\*/
* html #container {height:100%;}
/*end hide*/

Star selector hides height from Mozi otherwise it will stick at 100%
Escape hack hides rule from IEMac which will stumble on height:100%
Hugo.

Hmmm, dunno know why here noone seems to understand his problem...

This is my solution:

div {

min-height: 450px;

height: 450px;

}

Explanation:

min-height works in Firefox but not in IE.
height in IE works also as a min-height directive (not in Firefox).
So if you put them both you will have it work in both Firefox and IE.

As for all the 100% matter (everyone seem to think that it is about it) it don't work for you.

Hmm dunno what you mean by "why here noone seems to understand his problem"

I understand the problem and use of min-height/height fine thankyou very much as do others on this board, it's been discussed in many threads.
How it relates to the posters problem and his requirements is clear enough methinks,
although from the code you posted I'm not altogether sure you do, as you have now fixed FF/Mozi at 450px height stopping it expanding any further forcing it's contents to overflow, the requirement was for a container to always fill 100% of the viewport.

Apologies but I can not make sense of your final sentence; would you care to clarify.

Oh and welcome to the forum.

Hugo.

To Hugo
What are talking about? Where in the world I've said that you don't understand the min-height/height problem?

I just only said that many here don't understand what he wants to do, infact they keep answering to put 100% somewhere, but it's not the solution.

Thank you for the greeting, and in any case I don't want to offend you or anyone else, wanted only to help a guy and I've seen that many answers weren't correct.

Ok, beside that I also didn't understand the problem. The matter is that height:100% don't work with div (in my experiences not), so if everyone keep responding height:100% that doesn't help the guy that posted this:

tought it was a div problem like quoted, not html (as a tag, obviously).

Don't wanted to offend anyone, only help, sorry if I've invaded your territory Hugo.

kajordo,
It's not my territory, you have as much right to be here as I do and to voice an opinion; it's an open community.
I have taken no offence whatsoever I assure you.

I genuinely didn't understand what you were referring to especially the comments regarding using height:100% (it does work after a fashion and can have it's uses) as far as I could tell the questions had been answered, but reviewing things I could have made it clearer to ensure that Mozi only saw min-height; I think part of the problem may have been cross posting which can always be confusing especially as the original question was about height in IE but also it's a frustrating subject that crops up too often and that we seem to repeat and one tends to get a little sloppy when repeating stuff that one understands.
Perhaps we ought to write a definitive guide on the subject for the 'How To' section.

Hugo.

Can't you just put this div as the first element inside your problem div?

<div style="width : 0px ; height : 450px ; float : left ; clear : left ; overflow : hidden ;"></div>

This will force the container to be at least this big (you must have no height setting on the containing element).

It sure would be nice to do it all with just a stylesheet, but this works for me.

Haven't read the posting in detail but if you're looking for an IE work-around to the min-height, etc. css properties, this article and solution may be what you're looking for.
http://www.doxdesk.com/software/js/minmax.html

so without using that external file, there is no way to give a div a min-height (using px) and a max-height (using 100%) and having it work in IE?

Because, in IE it just goes as big as the content. I want it to fill the page (as does the other requests) but yet when the content is smaller; for the div not to colapse and stay at a min-height.

That would appear to be the case

*beep*ty. :?

It's early in the morning I thought your beep was a bump

This topic is a little unclear so I will have a go at clarifying.
min-height
IE treats height like min-height so if you give only IE a height value and other browsers a min-height you should get what you want.

.container{min-height:450px;}
/* hide from ie-mac \*/
* html .container{height:450px;}
/* end hack */

So thats simple enough but what about max-height.
Firstly you need to think seriously about what to do with content that exceeds the max-height. Browsers may do some funny things with the extra content unless you specify an overflow value.
Which may give us a hint of an answer for max-height in IE.
Set the overflow and height of the parent.
Max-height is something you should think clearly about before use.

Hope that helps

Now, there are two issues I am having with this;

1 (which is relavent). In IE the content doesn't extend to 100%.

2. I want the footer to placed at the bottom.

i tried this (from here http://www.svendtofte.com/code/max_width_in_ie/)

and changed width to height (way at the bottom - in px)

and it worked... :?

That code is sar-weet! Much better (I think) than the previous solution I posted.