CODEWITHSUNDEEP
css
Øystein Amundsen
Øystein Amundsen

Reputation: 4203

Stretch elements to the height of their container using CSS only

Concider the following fiddle: http://jsfiddle.net/dts2T/

This has been bugging me for quite some time now. The Javascript in this fiddle should be redundant. But I've ripped my hair out googling this: How can I do the same using ONLY CSS?

The problem lies in the fact that any of the three columns could potentially contain more than one child. First I need to stretch each .column container to the height of the #bottom div. Then I need to stretch the height of the last element in each .column, so that it fills the remaining space of it's container. But HOW?

And before any of you suggests Faux columns or any other crappy solution to fake column stretching, thank you, but such solutions won't apply to this problem at all. The design I'm implementing suggests gradients on columns and rounded corners, which will make faux columns not applicable. It is the easiest thing in the world to stretch things horizontally, why can' it be equally easy to stretch them vertically?! Aargh!!

I would really appreciate any help from you brilliant guys out there. Any suggestion would be fine. I would even appreciate a good discussion on faking vertical stretching, if it is constructive.

Thank you.

Upvotes: 1

Views: 435

Answers (1)

MLM
MLM

Reputation: 3688

This is a headbanging issue a lot of people run into at one time or another.

You can set the section to display: table; and columns to display: table-cell;. Even border radius and whatever fancy stuff works on it.

Here is a working demo: http://jsfiddle.net/MadLittleMods/QykYu/

Also here is the HTML and CSS:

CSS:

.container
{
    display: table;
    width: 100%;
    border: 2px solid #000000;
}
.column
{
    display: table-cell;   
    border: 1px solid #ff0000;  

    border-radius: 10px;        
}

HTML:

<section class="container">
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li> 
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            <li>Item 11</li>
            <li>Item 12</li>
            <li>Item 13</li>
            <li>Item 14</li>
        </ul>
    </div>
</section>

​

​

Upvotes: 1

Related Questions