body下div的margin-bottom在ff、ie下失效

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1 {
            position: fixed;
            left: 0;top:0;bottom:0;right: auto;
            width: 100px;
            height: 100%;
        }
        #div2 {
            position: absolute;
            left: 200px;
            width: 500px;
            height: 1200px;
            margin: 30px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

实际效果在ff、ie下div2的底边贴着body的底边，没有30px的margin，但是chrome下正常，是为什么？

阅读 3.2k

刚测试了一下的确如你所说，但我觉得这是你代码的锅，你这里#div2用的是绝对定位，所以实际上是脱离文本流了，使用margin意义不大，既然你用了其实也无妨，但是没有指定#div2距离底部的大小，他的height又远大于浏览器窗口的大小，所以我猜测在chrome中将视图的高度定位1200px+60px，而在ff中却忽略掉底部的margin，你改成如下代码可以再试试

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1 {
            position: fixed;
            left: 0;top:0;bottom:0;right: auto;
            width: 100px;
            /* height: 100%; */
          border:1px solid;
        }
        #div2 {
            position: absolute;
            left: 200px;
            width: 500px;
            height: 1200px;
            margin: 30px;
           bottom:0;
          border:1px solid;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

ps: 你的height：100%指定了并没有啥用

body下div的margin-bottom在ff、ie下失效

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？