Css 省略firefox/opera/Safari中最后一个div和页面结尾之间的间隙_Css_Firefox_Xhtml_Layout_Html

Css 省略firefox/opera/Safari中最后一个div和页面结尾之间的间隙

css firefox layout html

Css 省略firefox/opera/Safari中最后一个div和页面结尾之间的间隙,css,firefox,xhtml,layout,html,Css,Firefox,Xhtml,Layout,Html,我有一个带有大div（例如白色）的网页，另一个div位于前一个div之后。问题在于，如果白色块足够大，并且其高度几乎或甚至大于浏览器窗口（并出现滚动条），则红色块位于页面底部，在Firefox/Safari/Opera中，红色div和窗口末端之间仍有间隙：但在Explorer/Chrome中，一切正常：我的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

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

但在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>


根{显示：块；}
html，正文{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
字体系列：Tahoma；
背景颜色：蓝色；
}
#容器{
位置：绝对位置；
左：50%；
宽度：961px；
身高：100%；
左边距：-480px；
}
.输液容器{
位置：相对位置；
左侧填充：19px；
背景色：白色；
颜色：#434343；
}
分区#页脚版权{
位置：相对位置；
底部：15px；
字体大小：0.75em；
背景色：红色；
}
div#底部分隔符{
高度：50px；
}
分页符{
高度：35px；
}

如何解决这个问题，并在Firefox/Opera/Safari中使用相同的页面而不出现蓝色缺口

实际页数：

您的

footerCopyright

div设置为

位置：相对；底部：15px
当我将底部设置为0时，它在FF的底部对齐。
您的footerCopyright
div设置为位置：相对；底部：15px
当我将底部设置为0时，它在FF的底部对齐