По някаква причина получавам допълнително празно пространство (около 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 не показва никакви елементи в това празно пространство.