加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

css – Firefox,IE9问题,div内部的div高度为100%(Chrome上的

发布时间:2020-12-14 23:06:18 所属栏目:资源 来源:网络整理
导读:拿这个: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不继承 有没有解释为

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

希望这可以帮助!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!