如何保持页脚在底部，甚至与动态高度网站 [英] How to keep footer at the bottom even with dynamic height website
本文介绍了如何保持页脚在底部，甚至与动态高度网站的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我有一个页面动态设置CSS的高度（例如从数据库获取信息）时，如何保持页脚div始终在窗口底部？
How do I keep a footer div always at the bottom of the window when I have a page that dynamically set the height (get info from database, for example) with CSS?
如果你想用jQuery做，我想出了这个和工作正常：
If you want to do with jQuery, i came up with this and works fine:
设置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>
此脚本必须在代码末尾;
This script must be at the end of your code;
推荐答案
我相信你正在寻找 粘性页脚
I believe you are looking for a Sticky Footer
尝试以下操作： http://ryanfait.com/sticky-footer/
从上面的文章：
layout.css：
$ b
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 page：
The html page:
<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>
这篇关于如何保持页脚在底部，甚至与动态高度网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
