1

对于我正在处理的应用程序，我需要等高的列。我选择使用 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;
}
4

4 回答 4

1

添加html, body{height: 100%;} 看这个演示

如果您看起来与您的 jsfiddle 完全一样，只需添加body{height: 100%;}

于 2013-08-15T07:52:54.130 回答
1

这似乎是一个错误：让 DIV 填充整个表格单元格

我建议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;在第一列和行上使用规则。

于 2013-08-15T08:01:28.110 回答
0

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

$('.element').height($('.element').parent().height()/100 * //百分比在这里);

于 2013-08-15T08:04:29.970 回答
0

以下 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>
于 2014-02-08T13:00:06.803 回答