页脚下方的额外空间答案

【问题标题】：Extra space below footer页脚下方的额外空间
【发布时间】：2014-07-07 10:02:07
【问题描述】：

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

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

因此，即使divs 使用 CSS 的定位属性（top、left、etc）进行定位，浏览器仍然会以正常流程解析它们，从而将它们的高度相加（在顶部-它们在正常流程中出现的底部方式），从而导致页脚下方有额外空间，就好像内部divs（b、c、d）溢出页脚（它们没有定位）。

我只想知道如何让我的浏览器忽略多余的空间。

这是我的代码（另见 live example）

<html>
    <head>

        <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: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>

    </head>

    <body>

        <div id="container">

            <div id="b"><h2>Division_01</h2></div>
            <div id="c"><h2>Division_02</h2></div>
            <div id="d"><h2>Division_03</h2></div>

        </div>

        <div id="footer"><h2>This is my FOOTER....</h2></div>
    </body>
</html>

【问题讨论】：

尝试将html, body { margin: 0; padding: 0; } 添加到您的CSS
为什么用 jQuery 标记这个？
它的标签是这样的，bcoz 我想也许，jQuery 可以来拯救....
使用绝对/相对定位是一种非常糟糕的多列布局方式。当内容超出您分配的空间时会发生什么？
那么最好的方法是什么？包含这么多内容的网站如何应用布局。我的意思是他们有导航栏在左边，然后是内容栏在中间，然后其他栏在右边，还有他们的广告。他们使用哪种布局技术？？

标签： html css

【解决方案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>

【讨论】：

有了你提供的 HTML，是的。那将是唯一给定的问题。你一定有其他你没有展示的东西。

【解决方案2】：

我希望这会奏效

 <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】：

您使用的是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/

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

position: absolute 从正常的文档流中移除元素，并根据父元素的定位来定位它们（这就是我将position: relative添加到#container的原因）。

【讨论】：