火狐浏览器，IE9 +问题内部的高度100％（在Chrome上的工作示例） [英] Firefox, IE9+ issue with div height 100% inside a td (working example on Chrome)

问题描述

拿这个： http://jsfiddle.net/zVscL/4/

  .edit-me {
 height：100％; / *的行为与Chrome *不同* / 
 width：10px; 
 border：1px纯蓝色; 
背景：红色; 
 float：left; 
溢出：auto; 
} 
  

在Chrome和Firefox上打开页面。蓝色的div不会继承

有没有解释为什么会发生这种情况？任何修复？纯粹的HTML / CSS解决方案是可取的。

我一直在这个狗屎几个小时试图让CSS的行为，当我最后做FF做到这一点。吃掉我的开发时间。

解决方案

尝试设置 tr 和 td 到100％：



  tr， td {height：100％; } 
  

一般来说，要得到 height：100％要正常工作，元素父母的所有高度也必须设置。

编辑：

另一种解决方案是用容器 div 包装 td 的内容并使用绝对定位以确保 .edit-me div有效地具有100％的高度。

以下是HTML的外观例如：

 < table border =1> 
< tr> 
< td> 
< div class =container> 
< div class =edit-me>< / div> 
 Foo 
< br /> 
 Bar 
< / div> 
< / td> 
< td> hello< / td> 
< / tr> 
< / table> 
  

和CSS：

  .container {
 position：relative; 
 padding-left：10px; 
} 
 
 .edit-me {
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：0; 
 
 width：10px; 
 border：1px纯蓝色; 
背景：红色; 
溢出：auto; 
} 
  

希望这有助于您！

Take this: http://jsfiddle.net/zVscL/4/

.edit-me {
height:100%; /*does not behave the same as Chrome*/
width:10px;
border:1px solid blue;
background:red;
float:left;
overflow: auto;
}

Open the page on Chrome, then Firefox. The blue div does not inherit

Is there an explanation why this happens? Any fixes? Pure HTML/CSS solutions are preferable.

I've been at this shit for hours trying to get CSS to behave and when I finally do FF does this. Eating up my development time.

解决方案

Try setting the height of the tr and td to 100%:

tr, td { height: 100%; }

Generally speaking to get height: 100% to work correctly, all the heights of the element's parents must be set as well.

EDIT:

An alternative solution is to wrap the contents of the td with a container div and use absolute positioning to ensure the .edit-me div effectively has 100% height.

Here's what the HTML would look like:

<table border="1">
    <tr>
        <td>
            <div class="container">
                <div class="edit-me"></div>
                Foo
                <br/>
                Bar
            </div>
        </td>
        <td>hello</td>
    </tr>
</table>

and the CSS:

.container {
    position: relative;
    padding-left: 10px;
}

.edit-me {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width:10px;
    border:1px solid blue;
    background:red;
    overflow: auto;
}

Hope this helps!

这篇关于火狐浏览器，IE9 +问题内部的高度100％（在Chrome上的工作示例）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！