Допълнително празно пространство под лепкав долен колонтитул в FF и IE

По някаква причина получавам допълнително празно пространство (около 1px) под лепкавия долен колонтитул във Firefox и Internet Explorer. Въпреки това изглежда добре в Chrome.

Използвам следната HTML структура:

<div id="wrap">

    <header><p>Header</p></header>

    <div id="main">
        <p>Content here...</p>
    </div>

    <footer><p>Footer</p></footer>

</div>

CSS:

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    position: relative;
}

#main {
    padding: 20px 0 120px 0; /* padding-bottom must be same height as the footer */
    position: relative;
}

footer {
    position: absolute;
    bottom: 0px;
    height: 100px;
}

Демо на JSFiddle (Опитайте да преоразмерите прозореца, ако проблемът не се вижда веднага)

Просто не мога да разбера на какво се дължи. Firebug не показва никакви елементи в това празно пространство.


person Praxis Ashelin    schedule 01.08.2013    source източник


Отговори (1)


добавете overflow:hidden към контейнера

също

bottom:0px понякога се интерпретира като bottom:1px поради проблеми със закръгляването (таван/под).

това не се случва в нито един браузър, но очевидно се случва в msie

person Community    schedule 05.08.2013