Question

我已经阅读了几个有关此问题的答案，但我找不到合适的答案。我创建了一个容器div，并在其中创建了3个单独的div，并使用CSS定位对它们进行了定位。在底部我有一个页脚div但是当我在浏览器中加载页面时，页脚下方有额外的空间。我不想使用粘性页脚，因为页面上的内容是动态加载的，因此页面高度会动态变化。

我认为问题在于浏览器在解析页面时添加每个div的高度，并将该总和设置为文档的高度。由于div是一个块级元素，它们的流量在正常流量中是一个低于另一个。

因此，即使使用CSS的定位属性（div，top，left）定位etc，浏览器仍会在正常流程中解析它们，因此加上它们的高度（在正常流动中以它们的出现的上下方式），从而在页脚下面产生额外的空间，就好像内部div s（b，c，{ {1}}）溢出页脚（他们没有定位）。

我只是想知道如何指示我的浏览器忽略这个额外的空间。

这是我的代码（另请参阅live example）

Answer 1

尝试将html, body { margin: 0; padding: 0; }添加到您的CSS

或者，更具体一点：

<style>
    html, body { margin-bottom: 0; padding-bottom: 0; }
    #container{width:1000px;height:600px;border:2px solid black;}
    #b{width:200px;height:500px;border:2px solid blue;}
    #c{width:500px;height:500px;border:2px solid green;position:relative;top:-480px;left:247px;}
    #d{width:200px;height:500px;border:2px solid red;position:relative;top:-1005px;left:797px;}
    #footer{width:1000px;height:200px;border:2px solid red;}
</style>

Answer 2

您正在使用position: relative而不是absolute。尝试给你的#container相对定位，然后对孩子使用绝对值：

#container {
    width:1000px;
    height:600px;
    border:2px solid black;
    position: relative;
}
#b {
    width:200px;
    height:500px;
    border:2px solid blue;
}
#c {
    width:500px;
    height:500px;
    border:2px solid green;
    position:absolute;
    top: 20px;
    left:247px;
}
#d {
    width:200px;
    height:500px;
    border:2px solid red;
    position:absolute;
    top: 0px;
    right: 0px;
}

示例：http://jsfiddle.net/YpWSM/5/

当您使用height时，浏览器如何计算position: relative，您就在正确的轨道上;元素保留在正常流程中，然后被移动到偏移量。

position: absolute 从普通文档流中删除元素，并根据父对其定位的内容对其进行定位（这就是我将position: relative添加到#container的原因}）。

Answer 3

我希望这会起作用

 <style>
        #container{width:1000px;height:600px;border:2px solid black;}
        #b{width:200px;height:500px;border:2px solid blue;}
        #c{width:500px;height:500px;border:2px solid green;position:absolute;top:-480px;left:247px;}
        #d{width:200px;height:500px;border:2px solid red;position:absolute;top:-1005px;left:797px;}
        #footer{width:1000px;height:200px;border:2px solid red;}
    </style>

页脚下方的额外空间

3 个答案: