消除 firefox/opera/Safari 中最后一个 div 和页面结尾之间的间隙答案

【问题标题】：Elliminate gap between last div and page end in firefox/opera/Safari消除 firefox/opera/Safari 中最后一个 div 和页面结尾之间的间隙
【发布时间】：2010-09-16 16:01:22
【问题描述】：

我有一个带有大 div 的网页（例如白色）和另一个 div 跟随前一个。问题是如果白色块足够大并且它的高度几乎甚至大于浏览器窗口（并且出现滚动条），红色块在页面底部，红色div和末尾之间仍然存在间隙Firefox/Safari/Opera 中的窗口：

但在 Explorer/Chrome 中一切正常：

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <style type="text/css">
        root { display: block; }

        html, body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            font-family: Tahoma;
            background-color: blue ;
        }

        #container{
            position: absolute;
            left: 50%;
            width: 961px;
            height: 100%;
            margin-left: -480px;
        }


        .infContainer{
            position: relative;
            padding-left: 19px;
            background-color: white;
            color: #434343;
        }

        div#footerCopyright{
            position: relative;
            bottom: 15px;
            font-size: 0.75em;
            background-color: red;
        }

        div#bottomFooterDivider{
            height: 50px;
        }


        div#pageBottomDivider{
            height: 35px;
        }
    </style>
</head>
<body>
    <div id="container">

        <div id="mainBlock" class="infContainer">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
        </div>


        <div id="footerCopyright">
            <div id="bottomFooterDivider"></div>
        </div>
    </div>

</body>
</html>

如何解决这个问题，在 Firefox/Opera/Safari 中保持同一页面无蓝间隙。

实际页面： http://109.74.203.141/stack/1/tmp.html

【问题讨论】：

标签： css firefox xhtml layout html

【解决方案1】：

您的footerCopyright div 设置为position: relative; bottom: 15px;

当我将底部设置为 0 时，它在 FF 中排在底部。

【讨论】：