Устранить разрыв между последним div и концом страницы в Firefox / Opera / Safari - PullRequest
Новая
       18

Устранить разрыв между последним div и концом страницы в Firefox / Opera / Safari

1 голос
/ 16 сентября 2010

У меня есть веб-страница с большим div (например, белым) и другим div, который следует за предыдущим.Проблема в том, что если белый блок достаточно большой, а его высота почти или даже больше, чем у окна браузера (и появляются полосы прокрутки), красный блок находится внизу страницы, но между красным div и концом все еще есть зазор.окно в Firefox / Safari / Opera: alt text

Но в Explorer / Chrome все в порядке:

alt text

Мой код: 

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

1 Ответ

1 голос
/ 16 сентября 2010

Ваш footerCopyright div установлен на position: relative; bottom: 15px;

Когда я устанавливаю основание на 0, оно выравнивается по низу в FF.

...