0

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

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

因此,即使div使用 CSS 的定位属性(top, left, etc)来定位 s,浏览器仍然会在它们的正常流程中解析它们,从而将它们的高度相加(以它们在正常流程中出现的上下方式),从而导致额外的页脚下方的空间,好像内部divs ( b, c, d) 溢出页脚(它们没有定位)。

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

这是我的代码(另见现场示例

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

3 回答 3

0

尝试添加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>
于 2013-09-17T17:24:53.510 回答
0

我希望这会奏效

 <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>
于 2013-09-17T17:29:53.010 回答
0

您正在使用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)。

于 2013-09-17T17:26:45.557 回答