...

View Full Version : How to expand div's height to automatically fill up available space?



praveen.selvam
06-25-2008, 05:29 AM
Hello folks,

Newbie here, so kindly pardon me if this is a repetitive question and provide me any links if already available as a solution.

Here is the problem. I have a HTML like this:

<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>

My supportive CSS is:

#parent {
width: 200px;
height: 100%; // assuming inheritance from parent
}

#child1 {
width: 100%;
height: 100px;
}

#child2 {
width: 100%;
// need the height to automatically occupy remaining space.
}

Explanation: I have a parent div that has its dimensions perfect. I need to have 2 children divs inside this. The first child div shall have a 100% width and a fixed (eg. 100px) height. The second div (100% width) needs to auto expand it's height to fill up the remaining space in the parent div. How/what parameter can accomplish this?

Thanks in advance.

Praveen Selvam

effpeetee
06-25-2008, 07:02 AM
Check this link for help (http://exitfegs.co.uk/Faux.html)

Frank

praveen.selvam
06-25-2008, 07:30 AM
Frank,

Thanks for the link. I just went through them. The solution provided includes scripts from a couple of sources. That's good news. But I'm interested in a purely CSS solution. It could be great if I could get some ideas on those lines as well! :)

Arbitrator
06-25-2008, 08:27 AM
How/what parameter can accomplish this?I’m assuming that you mean “CSS rules” by “parameter”.

Solution 1


#parent { position: relative; width: 200px; height: 100%; }
#child1 { height: 100px; }
#child2 { position: absolute; top: 100px; left: 0; right: 0; bottom: 0; }

The above code assumes that #parent’s height will always be tall enough to encompass the content of both #child1 and #child2 (since absolutely positioned elements do not affect content flow and, thus, the dimensions of their parent elements). Do note that, however, that Internet Explorer 6 (but not 7) only supports the setting of two of the four shown directional properties at a time so this technique will not work in that browser.

Solution 2


#parent { display: table; width: 200px; height: 100%; border-collapse: collapse; }
#child1 { display: table-row; height: 100px; }
#child2 { display: table-row; }

This solution should work in every major browser except Internet Explorer up to the latest release version (7) since that browser doesn’t support table display property values.

Solution 3


#parent { position: relative; width: 200px; height: 100%; }
#child1 { position: absolute; top: 0; left: 0; right: 0; height: 100px; }
#child2 { height: 100%; padding: 100px 0 0; }

This solution is the most likely to be cross‐browser compatible. The second line can be changed to be less dynamic (i.e., use the width property instead of the directional properties) for MSIE6 compatibility.

effpeetee
06-25-2008, 08:38 AM
Here is another source which may help with css Faux Columns (http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need).

and yet another. (http://alistapart.com/articles/fauxcolumns/)

Frank

praveen.selvam
06-25-2008, 09:17 AM
@Arbitrator & @Frank: Thank you for your efforts. Both links have good suggestions for the target I'm trying to achieve. Especially Solution 3 provided by Arbitrator is very close.

Let me take this to the next level.

We are considering 2 types of divs here:
#child1: fixed dimensions
#child2: auto expand height to fill remaining space

My problem shall have any number of child1 type of divs surrounding (read above and below) the only child2 div. Considering this, the padding tactics proposed until now may not be the best solution.

Any thoughts? Thanks again in advance.

Here is a sample code:

HTML:

<div id="parent">
<div class="fixedDiv"></div>
<div class="fixedDiv"></div>
<div class="fillSpace"></div>
<div class="fixedDiv"></div>
<!-- fixedDiv can still be replicated. Consider such scenarios. -->
</div>

CSS:

#parent {
width: 200px;
height: 100%; // assuming inheritance from parent
}

.fixedDiv {
width: 100%;
height: 100px;
}

.fillSpace {
// ???
}

Arbitrator
06-25-2008, 09:56 AM
Considering this, the padding tactics proposed until now may not be the best solution.I’m thinking that this is the only purely CSS‐based solution that you’ll get to work in MSIE6 aside from faking things a la faux columns with backgrounds. (Of course, the latter solution has a large number of limitations.)

Solution 2 in my previous post is the preferred solution, but, as mentioned, it has compatibility issues. Solution 1 is not exactly dynamic; you’d have to change the top and bottom property values every time you changed the number of boxes above and below the stretchy box.

Otherwise, I think you’d have to resort to serving content based on browser and/or browser version (e.g., via conditional comments), dynamic CSS via scripting (which typically also requires some alternative for fallback to take care of accessibility issues), or abusing HTML or XHTML tables by using them for layout purposes.

praveen.selvam
06-25-2008, 11:36 AM
Alright guys, things are pretty clear now. I'll take my call on what needs to be done. A big thank you to both of you who've helped me out!!! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum