Question

对于我正在处理的应用程序，我需要相同高度的列。我选择使用CSS来设置列项目的样式。通过这种方式，每列的高度确实是列高度中的最大值。

在此处查看示例： http://jsfiddle.net/roelvd/GXe9m/

现在每个浏览器中每列的高度确实是100％。元素（在我的情况下为.container）直接在每列中也应该是100％。这适用于Firefox和Chrome; 但不在IE10中（很可能是较旧的ID版本）。

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

Answer 1

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

如果你看起来像你的jsfiddle，只需添加body{height: 100%;}

Answer 2

这似乎是一个错误：Make a DIV fill an entire table cell

我建议使用display: flex;代替，html更加明确。

小提琴：http://jsfiddle.net/GXe9m/2/

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

编辑：也许这不是一个错误：https://code.google.com/p/chromium/issues/detail?id=97959在尝试使用flexbox之后，某些浏览器中的子元素仍然无法延伸到height: 100%;，修复它的一种方法是position: relative;关于父级和孩子的position: absolute;：http://jsfiddle.net/GXe9m/3/另一种方式，尽管可能不是最好的方法是在第一列和行上使用display: flex;规则。

Answer 3

百分比和身高可能很有趣。我发现正确的方法是使用jquery：

$（'。element'）。height（$（'。element'）。parent（）。height（）/ 100 * //百分比在这里）;

Answer 4

以下CSS和标记在现代浏览器中应该可以正常工作，但也包括用于老式IE的jQuery后备。

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>

在等高度列内的IE10中元素的含量不是100％

4 个答案: