html页面设置底部高度,html – 当页面高度使用CSS动态更改时,将页脚保持在页面底部...

有很多主题,提供解决方案,以保持页脚在页面底部.但是,我正在努力让它发挥作用.

问题是页面可以动态地改变它的高度.

页脚的CSS如下：

#footer {

position: absolute;

right: 0;

bottom: 0;

left: 0;

}

html和body标签具有以下规则：

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,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知道高度变化？并将该页脚保留在文档的底部而不是它停留在窗口的底部？