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 に答える
0

パーセンテージと高さは面白いものになる可能性があります。それを正しくする方法はjqueryを使うことだと思います：

$('.element').height($('.element').parent().height()/100 * //パーセンテージが入ります);

于 2013-08-15T08:04:29.970 に答える