高度:表格单元格内的 100% 在 Firefox 和 IE 上不起作用 [英] height:100% inside table-cell not working on Firefox and IE

问题描述

我在尝试在带有 display:table-cell 的包装内创建带有 height:100% 的 div 时遇到了一些麻烦.

我注意到它在 Firefox 和 IE 9 中不起作用.

这是问题所在.您可以注意到它按预期工作，Chrome 或 Opera.

代码有什么问题?

有什么办法可以解决吗?

我想保留父项的 display:table 和 display:table-cell，以便将内容垂直居中放置在可变高度容器上.

HTML

<div class="table-cell"><div class="content"></div>

CSS

body, html {保证金:0;填充:0;高度:100%；}.桌子 {显示:表；宽度:100%；高度:100%；}.table-cell {显示:表格单元格；垂直对齐:中间；宽度:100%；}.内容 {高度:100%；显示:块；溢出:隐藏；位置:相对；背景:网址(http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg)；背景尺寸:封面；}

解决方案

要使 height:100% 起作用，所有父容器必须是 height:100%.如果您注意到，您的 .table-cell 样式没有 height:100%.

添加此样式可修复 Firefox 中的问题:

.table-cell {显示:表格单元格；垂直对齐:中间；宽度:100%；高度:100%；}

或者，将图像添加到 HTML 而不是 CSS background-image 也可能有效.

body, html {保证金:0;填充:0;高度:100%；}.桌子 {显示:表；宽度:100%；高度:100%；}.table-cell {显示:表格单元格；垂直对齐:中间；宽度:100%；}.内容 {高度:100%；显示:块；溢出:隐藏；位置:相对；背景尺寸:封面；}.content img {宽度:100%；高度:100%；}

<div class="table-cell"><div class="内容"><img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>

HTML

<img src="...你的图片网址..."/>

CSS

.table-cell {显示:表格单元格；垂直对齐:中间；宽度:100%；}.content img {宽度:100%；高度:100%；}

I'm having some troubles trying to create a div with height:100% inside a wrap with display:table-cell.

I've noticed it doesn't work in Firefox and IE 9.

Here's the fiddle with the problem. You can notice it works as expected and Chrome or Opera.

What's wrong with the code?

Is there any way to solve it?

I want to preserve the display:table and display:table-cell of the parents in order to center the content vertically on variable heights containers.

HTML

<div class="table">
    <div class="table-cell">
        <div class="content"></div>
    </div>
</div>

CSS

body, html {
    margin:0;
    padding:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
.content {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background: url(http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg);
    background-size:cover;
}

解决方案

For height:100% to work, all parent containers must be height:100%. If you notice, your .table-cell styles do not have height:100%.

Adding this style fixes the issue in Firefox:

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

As an alternative, adding the image to your HTML rather than as a CSS background-image might also work.

body, html {
    margin:0;
    padding:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
.content {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background-size:cover;
}

.content img {
    width:100%;
    height:100%;
}

<div class="table">
    <div class="table-cell">
        <div class="content">
            <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>
        </div>
    </div>
</div>

HTML

<div class="content">
    <img src="...your image url..." />
</div>

CSS

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

.content img {
    width:100%;
    height:100%;
}

这篇关于高度:表格单元格内的 100% 在 Firefox 和 IE 上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！