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

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;
}

Michael Lawton

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

I would reccomend using display: flex; instead, the html is much more consise.

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.

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

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

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);

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>

来源：https://stackoverflow.com/questions/18248214/content-of-element-not-100-in-ie10-inside-of-equal-height-columns

标签

css

internet-explorer

css-tables

equal-heights