PDA

View Full Version : Setting a Height to 100% of Available



andrewmta
Mar 23rd, 2007, 06:40 PM
I've been doing a lot of experimenting because the web sites I design tend to use a lot of database driven content. Setting absolute heights for content areas is not practical.

I'm trying to find a way of using CSS, if possible to have a DIV's height inherit from its parent element instead of determining the height based on the content inside.

For width, this happens by default. If you create a div, for example, with the words Test and the background: ff0000; you will end up with a div that stretches the entire width of the available space with a red background.

I'm hoping there is a way of setting height to act similarly. I do a lot of designing of dynamic content within containers and I'm trying to avoid having to use css appointed heights.

Arbitrator
Mar 23rd, 2007, 11:51 PM
If you want an element’s height to be equal to it’s parent’s height, then you would use height: 100% or height: inherit. (Note that the inherit keyword is still not supported by Internet Explorer.) min-height: 100% can also be used if the containing block has an explicit height specified. (Internet Explorer 6 does not support min-height:.) The width‐like behavior that you mention can be attained using CSS tables (which Internet Explorer also does not support):


div { display: table; }
div > div { display: table-cell; }


<div>
<div></div>
</div>

I suppose that there’s also JavaScript…

andrewmta
Mar 26th, 2007, 01:07 PM
Thanks for your help, it looks like I'll have to go the Javascript route to ensure it works in IE.

koyama
Mar 26th, 2007, 09:52 PM
...just wanted to add some details to the first technique using a percentage height that Arbitrator is describing.

Roughly stated, according to the CSS2.1 visual formatting model (http://www.w3.org/TR/CSS21/visudet.html#the-height-property), for an element whose containing block has height: auto, you can only use a percentage height if you at the same time use absolute positioning. Why? This makes good sense because if the element isn't absolutely positioned it would usually participate in the computed height for the parent element. Then if you e.g. specify height: 100% this could lead to an infinitely high container!

Example of what you may do:


<div id="container">
Some text
<div id="child">Some more text</div>
</div>



#container {
position: relative;
}
#child {
height: 100%;
width: 100px;
position: absolute;
top: 0;
left: 0;
}

The only problem is browser support. This above works in FF. However, in IE6 this is not working: height: 100% is completely ignored. In IE7 there seems to be buggy support: When #child is e.g. an <img>-element content is not redrawn as one resizes the window. On the other hand, I haven't found problems for <div>-elements.

I suppose that there’s also JavaScript…
yeah, one could feed IE with a dynamic expression.


#container {
position: relative;
}
#child {
height: expression(this.parentElement.clientHeight + 'px');
width: 100px;
position: absolute;
top: 0;
left: 0;
}