css – Firefox,IE9问题,div内部的div高度为100%(Chrome上的工作示例)

前端之家收集整理的这篇文章主要介绍了css – Firefox,IE9问题,div内部的div高度为100%(Chrome上的工作示例)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

拿这个: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;
}

在Chrome上打开页面,然后在Firefox上打开.蓝色div不继承

有没有解释为什么会这样?任何修复?纯HTML / CSS解决方案更可取.

我一直在这个狗屎几个小时试图让CSS表现出来,当我终于做FF时这样做.吃掉我的开发时间.

最佳答案
尝试将tr和td的高度设置为100%:

tr,td { height: 100%; }

一般来说,要获得高度:100%才能正常工作,必须同时设置元素父母的所有高度.

编辑:

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

以下是HTML的外观:

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

希望这可以帮助! 原文链接:https://www.f2er.com/html/426430.html

猜你在找的HTML相关文章