如何使用动态高度网站将页脚保持在底部
当我有一个页面可以通过CSS动态设置高度（例如，从数据库获取信息）时，如何将页脚div始终保持在窗口底部？
如果您想使用jQuery，我想出了这一点并且效果很好：
设置页脚的CSS：
#footer { position:absolute; width:100%; height:100px; }
设置脚本：
<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();
if (x+100<=y){ // 100 is the height of your footer
$('#footer').css('top', y-100+'px');// again 100 is the height of your footer
$('#footer').css('display', 'block');
}else{
$('#footer').css('top', x+'px');
$('#footer').css('display', 'block');
}
</script>
该脚本必须位于代码的末尾。
问题答案：
我相信您正在寻找 粘性页脚
从上面的文章：
layout.css：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
html页面：
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
-
问题内容： 我需要保持页脚在底部，但其高度可变，因此主要解决方案不适合我… 任何人都可以使用灵活的页脚解决方案？ 问题答案： ：解决此布局问题的现代方法是使用CSS模型。所有主流浏览器和IE11 +均支持该功能。 这是使用带有的s 的灵活高度的粘性页脚的解决方案： 需要注意的是CSS是设计用于布局 文档的 ，而不是Web应用程序屏幕的。CSS display：table属性虽然非常有效，并且在所有
-
问题内容： 设置网页的最佳做法是什么，以便在该网页上显示的内容/文本很少的情况下，页脚显示在浏览器窗口的底部，而不是显示在网页的中途？ 问题答案： 您正在寻找的是 CSS Sticky Footer 。
-
问题内容： 我有一个简单的2列布局，带有页脚，可清除标记中的右和左div。我的问题是我无法在所有浏览器中都将页脚停留在页面底部。如果内容将页脚放下，它会起作用，但并非总是如此。 问题答案： 要获得页脚的粘性： 有一个与您的内容。 右 前 收盘的的地方 。 权 后 收盘的的地方 。
-
所以，我有一个按钮，在黑暗和光明模式之间切换（我的网站默认是黑暗的），它可以工作，但现在我需要它保持在任何切换状态，在多个页面选择。我怀疑这和会话存储有关。也不想使用jQuery。我可以在代码中添加什么来实现这一点呢？ 我有五个页面都链接到了id为“dark”的styles.css，然后在JS中我引用了第二个样式表light.css或JS中的“light”，所以我要切换样式表。所有五个页面的页脚都
-
我想要一个： > 在页面底部，即使 在身体的正常流动中，在
-
问题内容： 我需要使我的网页高度适合屏幕尺寸的高度，而无需滚动。 HTML CSS 问题答案： 一个快速，简洁，有效的独立解决方案，带有内联CSS，无jQuery要求。AFAIK也可以从IE9使用。