5

我有一个 div 使用display: table-cell它包含一个子 div ......两者都使用基于百分比的尺寸。当该子 div 包含超过一定数量的文本（取决于字体大小）时，它会忽略其高度规则。

这是一个孤立的测试用例

单击“切换文本”按钮将演示该问题。它在 Chrome 和 Safari 中更为明显，但 Firefox 也出现了这个问题。

我希望.childdiv 的高度为 40 像素......但它大约是 290 像素（在 Chrome 和 Safari 中）。同样，.table高度应为 240 像素。

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 回答
1

似乎填充.child-inner有不利影响。我删除了填充，它现在尊重高度。http://jsfiddle.net/cwardzala/Z27S9/1/

.child-inner {
    height: 100%;
    width: 100%;
    /* padding: 10px; */
    overflow: hidden;
    overflow-y: auto;
}
于 2013-08-28T17:28:49.093 回答