Сохраняйте нижний колонтитул внизу страницы, когда высота страницы динамически изменяется с помощью CSS. ⇐ CSS

[Anonymous]

В моем текущем решении нижний колонтитул находится внизу страницы. Когда высота страницы динамически изменяется, нижний колонтитул остается внизу окна.
CSS:

Код: Выделить всё

#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}

html, body {
min-height: 100%;
height: 100%;
}

Фрагмент лучше всего использовать в полноэкранном режиме:

Код: Выделить всё

$(document).ready(function() {

var button = $("#addContent");
var lorem = "Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.

Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.

Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.

Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.
";

button.click(function() {

$("main button").before(lorem);

});

});

Код: Выделить всё

* {
box-sizing: border-box;
}

body {
margin: 0;
}

header {
background: #333;
color: #fff;
padding: 25px;
}

main {
padding: 25px;
}

main h3 {
margin-top: 0;
}

code {
background: #f1f1f1;
padding: 0 5px;
}

footer {
position: absolute;
background: #ededed;
padding: 25px;
color: #000;
right: 0;
bottom: 0;
left: 0;
}

Код: Выделить всё

Just a sample header



Some sample content
Click on the button

to see what i mean.
When the

Код: Выделить всё

heigth

of the page dynamically changes, the

Код: Выделить всё

footer

will stay at its exact position.
Click to add more content



The footer




Как сообщить CSS об изменении высоты?
Как мне сохранить этот нижний колонтитул внизу документа?

Подробнее здесь: https://stackoverflow.com/questions/455 ... -using-css