CODEWITHSUNDEEP
htmlcssmultiple-columns
roamingLT
roamingLT

Reputation: 29

how do I expand a ul or div to fill the height of its container

I am using multiple ULs (column) to provide side-by-side columns at the foot of my page. Each UL sits within a DIV (columnContainer). These DIVs sit within another DIV (shelf) (and then it is turtles all the way up).

I am using the left border of the columnContainer DIV to create a vertical line between each column of content. Because the content in each UL is of different heights, the vertical lines are too.

I want the vertical lines to all be the same size. I think this means that I need my column ULs to expand their height to match the tallest UL, or I need the columnContainer DIVs to expand their height to fill their parent (which is surely controlled in height by the tallest child UL?).

The amount of content and the number of columns varies dynamically so I can't simply define min/max heights.

A sample version of my problem can be found at: http://pastebin.com/ti5u41Ey

any and all help most welcomed

Upvotes: 2

Views: 1999

Answers (2)

jackJoe
jackJoe

Reputation: 11148

a non-javascript solution is using fake backgrounds (in this case one that includes the vertical lines of all the columns).

This will guarantee (visually) that all columns have the same height.

example:

html:

<div class="theBackground">
    (your columns here)
</div>

css:

.theBackground {
    background: url(fakebackground.gif) repeat-x;
}

Upvotes: 1

irama
irama

Reputation: 658

Unfortunately height: 100%; won't work unless there is a height specified on the parent container.

Setting a hard-coded height is not very flexible (you would have to update this value when ever you changed the amount of content in the footer).

A more flexible approach is to use JavaScript. Here's some jQuery that should do the trick:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
$(document).ready(function(){
    recalcColumnHeights ();
    $(window).resize(recalcColumnHeights);
});


recalcColumnHeights = function (){
    tallest = null;
    $('.wptheme-expandedQuickLinksShelfColumnContainer')
        .each(function(){
            if (tallest == null || $(this).height() > tallest.height()) {
                tallest = $(this);
            }
        })
        .height(tallest.height());
    ;
};
</script>

Play with an example here: http://jsfiddle.net/irama/m7Z7a/

EDIT: Re-sizing the browser window can sometimes affect the height of columns, so you may wish to use this version that recalculates the heights on window resize: http://jsfiddle.net/irama/m7Z7a/1/

Let us know how you go!

Upvotes: 3

Related Questions