Content of element not 100% in IE10 inside of equal height columns

Question

For an application I am working on I need equal height columns. I chose to use CSS to style my column items as table's. In this way the height of each columns is indeed the maximum among column heights.

See an example here: http://jsfiddle.net/roelvd/GXe9m/

Now the height of each column is indeed 100% in each browser. The element (.container in my case) directly in each column should however also be 100%. This works fine in both Firefox and Chrome; but does not in IE10 (and most likely older ID versions).

HTML:

<div id="wrapper" class="table">

    <div class="row">
        <div class="column" style="width: 20%">
            <div class="container empty"></div>
        </div>
        <div class="column" style="width: 50%">
            <div class="container">
                <div class="element"><p>Text</p></div>
                <div class="element"><p>And more text. An complete paragraph actually.</p><p>And another one!</p></div>
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
        <div class="column" style="width: 30%">
            <div class="container">
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
    </div>

</div>

CSS:

#wrapper {
    width: 600px;
}

.table {
    display: table;
    height: 100%;
}

.row {
    display: table-row;
    height: 100%;
}

.column {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

.container {
    height: 100%;
    margin: 0;
}

.container.empty {
    background-color: yellow;
}

score 1 · Answer 1 · answered Aug 15 '13 at 07:52

1

Add html, body{height: 100%;} see this demo

If you are looking exactly as your jsfiddle, just add body{height: 100%;}

answered Aug 15 '13 at 07:52

Bhojendra Rauniyar

83,432
35
168
231

That does seem to work in IE! However now the height of the columns is 100% of the body. What we would like to achieve is that the height of each column would be precisely the height of the maximum height among columns. So the height should be defined by the content placed in the second column. – Roel van Duijnhoven Aug 15 '13 at 13:01
But then the containers inside of the column are not 100% anymore :). – Roel van Duijnhoven Aug 16 '13 at 08:34
Din't you define body{height: 100%;}? – Bhojendra Rauniyar Aug 16 '13 at 08:35
Just set height 100% for body not for html (see at bottom) – Bhojendra Rauniyar Aug 19 '13 at 06:54

score 1 · Accepted Answer · edited May 17 '22 at 13:57

1

This seems to be a bug: Make a DIV fill an entire table cell

I would recommend using display: flex; instead; the HTML is much more concise.

Fiddle: http://jsfiddle.net/GXe9m/2/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit: maybe this is not a bug: https://code.google.com/p/chromium/issues/detail?id=97959 After trying the flexbox it seems children elements can still not stretch to height: 100%; in some browsers, one way to fix it is position: relative; on the parent and position: absolute; on the child: http://jsfiddle.net/GXe9m/3/ Another way, though probably not the best is to use the display: flex; rules on the first column as well as on the row.

edited May 17 '22 at 13:57

TylerH

20,799
66
75
101

answered Aug 15 '13 at 08:01

Michael Lawton

1,460
1
14
25

Your Fiddle DOES work in IE10 on my setup. However at the moment our minimum requirement is IE9. It seems that there is no support for flex boxes in IE9 :(. Or is this part of the flex-boxes actually working in this browser? – Roel van Duijnhoven Aug 15 '13 at 13:06
For IE9 you would have to use a polyfill, http://flexiejs.com/ is the only one available at the moment and it uses the older syntax (see http://css-tricks.com/using-flexbox/) – Michael Lawton Aug 15 '13 at 13:13
The columns are going to be resizable (ridiculous requirements, I know!). One of the limitations of the Flexiejs seems that it is only applied at the start (Quote "The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected."). So in IE9 this feature will not be usable I guess. Having said that: maybe this is the best it gets. Or are there better solutions to use? – Roel van Duijnhoven Aug 15 '13 at 13:53
I assume putting the background on the cell not the container wouldn't work? http://jsfiddle.net/GXe9m/4/ Otherwise you could have a look at some other options here: http://css-tricks.com/fluid-width-equal-height-columns/ – Michael Lawton Aug 15 '13 at 14:52
Actually the important part is not the background; but users being able to drag elements anywhere into the region of the column (using jQuery UI's sortable). For that the height also needs to be 100%... In any case, it seems kinda impossible :(. – Roel van Duijnhoven Aug 16 '13 at 08:36

score 0 · Answer 3 · edited May 17 '22 at 13:57

0

Percentages along with height can be a funny one. I find that the way to get it right is to use jQuery:

$('.element').height($('.element').parent().height()/100 * //percentage goes here);

edited May 17 '22 at 13:57

TylerH

20,799
66
75
101

answered Aug 15 '13 at 08:04

Hive7

3,599
2
22
38

I should have mentioned this. We already tried using Javascript. But b because the contents of our div's is highly dynamic the computation of the height fails in numerous cases. Due to this we get content that overlaps the boundary of the div, slow updates, etc. Therefore we tried to look for an CSS alternative. Thanks anyway! – Roel van Duijnhoven Aug 15 '13 at 12:59

score 0 · Answer 4 · answered Feb 08 '14 at 13:00

The following CSS and markup should work fine alone in modern browsers, but also includes jQuery fallback for vintage IEs.

http://jsfiddle.net/B3u7x/

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(window).load(function(){
                //Detect if < IE11
                if(document.documentMode){
                    setColContentHeights();
                    $(window).resize(function(){
                        setColContentHeights();                                             
                    });
                }
            });
            function setColContentHeights(){
                $('.columnsHolder').each(function(){
                    var maxContentHeight = 0;
                    var colContent = $(this).find('.column > .content');
                    colContent.each(function(){
                        $(this).css('height','');  //Reset any previous height setting.
                        //workout heighest column height.
                        if($(this).height() > maxContentHeight) maxContentHeight = $(this).height();
                    });
                    colContent.each(function(){
                        //apply height if required.
                        if($(this).height() < maxContentHeight)$(this).height(maxContentHeight);
                    });
                });
            }
        </script>
        <style>
            html, body{
                height:100%;
                margin:0;
            }
            .columnsHolder{
                display:table;
                height:100%;
            }
            .column{
                display:table-cell;
                height:100%;
                padding:0 10px;
                background:red;
            }
            .content{
                display:table;
                height:100%;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="columnsHolder">
            <div class="column">
                <div class="content">
                    hello I'm column1
                </div>
            </div>
            <div class="column">
                <div class="content">
                    hello I'm column2
                    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                    I like being tall.
                </div>
            </div>
            <div class="column">
                <div class="content">
                    hello I'm column3
                </div>
            </div>
        </div>
    </body>
</html>

Content of element not 100% in IE10 inside of equal height columns

4 Answers4

Linked