html - 文本长度 + 表格单元格 + 百分比高度 - 这是怎么回事?

标签 html css layout css-tables

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

Here's an isolated test-case

单击“切换文本”按钮将演示该问题。它在 Chrome 和 Safari 中更为明显,但 Firefox 也存在此问题。

我希望 .child div 的高度为 40px...但实际上它大约为 290px(在 Chrome 和 Safari 中)。同样,.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;
}

最佳答案

我尝试将不断增长的元素包装在使用绝对定位的 div 中,它似乎具有您要求的效果:http://jsfiddle.net/fschwiet/2RgPV/ .查看添加的“fixme”div。这个想法是 fixme div 将其中发生的任何事情与外部存在的任何表逻辑密封起来。

.fixme {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    overflow:hidden;
}

关于html - 文本长度 + 表格单元格 + 百分比高度 - 这是怎么回事?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18477412/

相关文章:

jquery - 使用 Jquery 验证时无法提交表单

html - 是否可以在多个表格行上设置一个线性渐变背景?

html - 如何使元素超出其父元素的范围?

Android布局打包

html - HTML 和 CSS 中带有底线的图书索引布局样式

html - 使用空白源调整图像大小

html - 我们可以在CSS中选择从哪个父级继承吗?

python - 在python中逐行读取html url

html - 具有 float 元素的 CSS 中心站点并显示完整的容器背景颜色

html - IE8列表格式问题