moretea — 2013-06-27T10:21:20-04:00 — #1
Quick question for the group; what's the best way to build a div with an absolutely fixed height? The div is absolutely positioned, overflow is hidden, and I set the same value for max-height and min-height, but a colleague said it would have been sufficient to just set the height of the div.
TIA for your input and opinions!
john_betong — 2013-06-27T10:27:59-04:00 — #2
I agree with your colleague.
Have you tried all options?
Are there any browser differences?
picnictutorials — 2013-06-27T11:00:24-04:00 — #3
Height is equal to the same max height and width.
ioan — 2013-06-27T11:00:38-04:00 — #4
Yeah, agreed just use height. There should not be any browser differences when using height. Cheers!
dresden_phoenix — 2013-06-27T14:44:48-04:00 — #5
OK.. so here is the rub.
Your colleague is mostly right. setting max and min height is.. overkill at least. height: whatever ;, will set the height of a BLOCK element ( such as a div). Of course , if the content of the element EXCEEDS the size of the element it will overflow.. it's just the way it works ( remember that mug "CSS ROCKS!".. google it). At this point you have a choice: add overflow to hide or scroll the overflowed content.
THEN THERE IS IE ( eating glue again), and this is probably what you are noticing older IE treats height as min-height AND it does recognize max/min-height at all. IE7 does not support "inherit" as a value on any of these properties. IE8 has some bugs with max-width/height combined with overflow: auto/scroll. Normally this worst in our favour when what we want is min-height, you case is the opposite. That's where overflow comes in. The only caveat beign that you don't really get a div (in old IE) which can be FIXED HEIGHT, and SHOW its overflow.