Html 显示中的跨浏览器全高元素：表格单元

我写这个问题是为了整合这个网站上的多个类似问题，最终得到一个正确的是或否的答案。 一些现有答案被错误地标记为正确，而事实上，它们不能正常工作

已经阅读，相关问题

给定以下标记：

<div class="equal-height">
    <div class="col-50">
        <div class="cell-fill">
            ...
        </div>
    </div>
    <div class="col-50">
        <div class="cell-fill">
            ...
        </div>
    </div>
</div>

试试这个：

我认为诀窍是将

position:absolute

的

div

放在

position:relative

的div中。您还必须确保它100%的高度一直到

车身

html，正文{
身高：100%；
溢出：隐藏；
}
.table div{
显示：表格；
宽度：100%；
}
.表格行{
显示：表格行；
宽度：100%；
}
.表格单元格{
显示：表格单元格；
浮动：无；
填充：0；
垂直对齐：顶部；
}
.全高{
身高：100%；
}
.相对包装{
位置：相对位置；
身高：100%；
}
.滚动包装器{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
#可乐{
宽度：15%；
}
#可乐{
宽度：25%；
填充：0；
}
#可乐{
宽度：60%；
}

可乐
可乐
可乐

我不知道为什么人们总是错过显示：表行容器。以下是一个适用于FF（当前）、Chrome（当前）、Safari（当前）和IE 9、10和11的解决方案：

答案是制作一个完整的包装，它是

display:table

，一整行是

display:table row

，两个宽度相等的单元格是

display:table cell

HTML

<div class="equal-height">
    <div class="col-row">
        <div class="cell-fill">
            Dejah Thoris related many interesting facts and legends concerning this lost race of noble
            and kindly people. She said that the city in which we were camping was supposed to have been
            a center of commerce and culture known as Korad. It had been built upon a beautiful,
            natural harbor, landlocked by magnificent hills. The little valley on the west front of the
            city, she explained, was all that remained of the harbor, while the pass through the hills
            to the old sea bottom had been the channel through which the shipping passed up to the city's
            gates.
        </div>
        <div class="cell-fill">
            Dejah Thoris related many interesting facts and legends concerning this lost race of noble
            and kindly people.
        </div>
    </div>
</div>

---

啊，你实际上错过了已经取得的成就。类为

.col-50

的两个元素已跨越包含

等高

元素的整个高度。你不需要吵架。这适用于所有浏览器。问题是在这两个元素中有一个元素跨越整个高度。虽然这对跨越整个页面高度的单行有效，但对同一页面上的多个迭代不起作用。如果我简单地将我的外部

div

的高度设置为100%，并且将

html，body

设置为100%，那么同样的效果也会达到。@JamesSouth啊，好吧-我误解了。没有意识到您正在查找堆叠的行-以为这些是整个页面列。在这种情况下，您可能想检查一下：这是针对引导的，但是您应该能够通过组合引导样式和文章中的样式来进行概括（也许我会尝试一下…）。这更像你要找的吗？它在其他引导网站上对我来说效果很好…别介意最后的评论-我知道这还不是你想要的。干杯。。我觉得这是不可能的。我想这就是渐进增强的目的。

<div class="equal-height">
    <div class="col-row">
        <div class="cell-fill">
            Dejah Thoris related many interesting facts and legends concerning this lost race of noble
            and kindly people. She said that the city in which we were camping was supposed to have been
            a center of commerce and culture known as Korad. It had been built upon a beautiful,
            natural harbor, landlocked by magnificent hills. The little valley on the west front of the
            city, she explained, was all that remained of the harbor, while the pass through the hills
            to the old sea bottom had been the channel through which the shipping passed up to the city's
            gates.
        </div>
        <div class="cell-fill">
            Dejah Thoris related many interesting facts and legends concerning this lost race of noble
            and kindly people.
        </div>
    </div>
</div>

.equal-height {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.col-row {
    display: table-row;
    height: 100%;
}

.cell-fill {
    width: 50%;
    display: table-cell;
    height: 100%;
    background-color: #ff69b4;
}