Лучшее, что я когда-либо смог сделать, это сдвинуть нижний колонтитул с нижней части страницы, чтобы он всегда был с нижней части экрана. Ниже приведен пример того, как это сделать. Разделение stickyfooterfail не работает, и я не знаю почему, но свойство bottom
работает правильно, если вы изменили position
на абсолютное значение.
<html>
<head>
<style type='text/css'>
body {
height: 100%;
}
#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}
#stickyfooter {
background: #f0f;
}
</style>
</head>
<body>
<div id='fullheight'>
Some text<br>
Some text<br>
Some text<br>
<div id='stickyfooterfail'>
Should be at the bottom but isn't
</div>
</div>
<div id='stickyfooter'>
This is pushed off the bottom by the min-height attribute of #fullheight
</div>
</body>
</html>
Если вы знаете, что нижний колонтитул будет иметь постоянный абсолютный размер, тогда вы можете установить padding-bottom
в - (высота), например, -40px, если он был 40px, а затем установить bottom
из #stickyfooterfail в то же значение .