height：100％inside table-cell不能在Firefox和IE上工作 [英] height:100% inside table-cell not working on Firefox and IE

问题描述

我有一些麻烦试图创建一个 div 与高度：100％ code> display：table-cell 。

我注意到它在Firefox和IE 9中不起作用。 p>

这是问题的谜题。

代码有什么问题？

有没有任何方式来解决它？

我想保留 display：table 和

HTML

：table-cell

 < 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; 
} 
  

解决方案

> height：100％工作，所有父容器必须 height：100％。如果您注意到， .table-cell 样式没有 height：100％。

添加此样式修复了Firefox中的问题：

 。 table-cell {
 display：table-cell; 
 vertical-align：middle; 
 width：100％; 
 height：100％; 
} 
  

或者，将图像添加到HTML而不是CSS background-image 也可以工作。

  body，html {margin ：0; padding：0; height：100％;}。table {display：table; width：100％; height：100％;}。table-cell {display：table-cell; vertical-align：middle;宽度：100％;}。显示：block; overflow：hidden;位置：相对; background-size：cover;}。content img {width：100％; height：100％;}  

 < div class =表> < 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>  

h2>

 < div class =content> 
< img src =...您的图片网址.../> 
< / div> 
  

CSS

  .table-cell {
 display：table-cell; 
 vertical-align：middle; 
 width：100％; 
} 
 
 .content img {
 width：100％; 
 height：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%;
}

这篇关于height：100％inside table-cell不能在Firefox和IE上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！