5

子divを含むdivを使用しdisplay: table-cellています...どちらもパーセンテージベースのディメンションを使用しています。その子 div に (font-size に応じて) 一定量以上のテキストが含まれている場合、高さの規則は無視されます。

ここに孤立したテストケースがあります

「テキストの切り替え」ボタンをクリックすると、問題が示されます。Chrome と Safari でより顕著ですが、Firefox でも問題が発生します。

.childdiv の高さは 40 ピクセルであると予想されますが、代わりに (Chrome と Safari では) 約 290 ピクセルです。同様に.table、高さは 240px にする必要があります。

HTML:

<div class="main">
    <div class="item">
        <div class="table">
            <div class="table-cell">
                <div class="child">
                    <div class="child-inner">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: relative;
    margin: 20px;
    width: 320px;
    height: 480px;
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #eee;
    overflow: hidden;
}

.table {
    display: table;
    position: absolute;
    top: 2.083333333333333%;
    left: 50%;
    height: 50%;
    width: 50%;
}

.table-cell {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.child {
    position: relative;
    overflow: hidden;
    left: 0%;
    height: 16.666666666%;
    width: 93.75%;
    background-color: rgba(255, 255, 255, 0.5);
}

.child-inner {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}

p {
    margin: 0;
    padding: 0;
}
4

2 に答える 2

1

絶対配置を使用しているdivで成長する要素をラップしようとしましたが、あなたが求めている効果があるように見えました: http://jsfiddle.net/fschwiet/2RgPV/。追加された「fixme」div を参照してください。fixme div の種類は、外部に存在するテーブル ロジックからその内部で起こっていることをすべて封印するという考え方です。

.fixme {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    overflow:hidden;
}
于 2013-08-28T17:19:14.070 に答える