怎样让页面的 footer 始终在最底部？

BestAns1 2015-01-17 04:41:16

要求是这样的：

因为每个页面有高有低，当页面高度小于窗口高度时，就让页脚的 <div id="footer"> 固定在窗口最底部，就是 position:fixed; bottom:0;

但是当页面公安度大雨窗口高度时，就是说，有滚动条，这时候就希望页脚的 <div id="footer"> 在文档最底部，就是只有把滚动条拉到最低端才能看到 footer。就是 position: static。

但是窗口大小会改变，文档高度也会改变。怎样让 footer 自适应各种情况，始终处于最底端？感觉考虑的事情挺多的，有没有直接的 css 可以直接设置呢？或者需要点 javascript 也可以。

谢谢！

...全文

5412 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

BestAns1 2015-01-18

打赏
举报

引用 1 楼 slwsss 的回复:

<style>
  *{margin:0px;padding:0px;}
  #footer{width:100%;height:20px;background:red;bottom:0px;}
</style>
<div>
<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3
</div>
<div id="footer"></div>
<script>
  function ct(){
    return document.compatMode == "BackCompat"? document.body.clientHeight:document.documentElement.clientHeight;
  }
  var f=document.getElementById('footer');
  (window.onresize=function(){
    f.style.position=document.body.scrollHeight>ct()?'':'absolute';
  })();
</script>

谢谢你的回复！不过这个代码漏掉了一种情况：当文档高度改变的时候，footer 就不会自动更新了。文档高度会随着内容的改变而改变。比如，有一个 jsTree，展开时，文档高度很可能会改变。这样 footer 就无法做到自适应了。在你的代码的基础上，我补充完整了测试代码，你试试，点击顶部的文字，隐藏黄色块以后，footer 是不会自适应的：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}

		#footer {
			width: 100%;
			height: 20px;
			background: red;
			bottom: 0px;
		}
	</style>
</head>
<body>
	<div>
		<div id="test">click here</div>
		<p style="display:block;height:200px;background-color:yellow">asdf</p>
		<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3
	</div>
	<div id="footer"></div>
	<script>
		function ct() {
			return document.compatMode == "BackCompat" ? document.body.clientHeight : document.documentElement.clientHeight;
		}
		var f = document.getElementById('footer');
		(window.onresize = function () {
			f.style.position = document.body.scrollHeight > ct() ? '' : 'absolute';
		})();
	</script>

	<script type="text/javascript">
		$("#test").click(function () {
			$("p").toggle();
		});
	</script>
</body>
</html>

KK3K2005 2015-01-18

打赏
举报

$("#test").click(function () { $("p").toggle(); setTimeout(function(){ window.onresize && window.onresize(); }) });

slwsss 2015-01-17

打赏
举报

<style>
  *{margin:0px;padding:0px;}
  #footer{width:100%;height:20px;background:red;bottom:0px;}
</style>
<div>
<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3
</div>
<div id="footer"></div>
<script>
  function ct(){
    return document.compatMode == "BackCompat"? document.body.clientHeight:document.documentElement.clientHeight;
  }
  var f=document.getElementById('footer');
  (window.onresize=function(){
    f.style.position=document.body.scrollHeight>ct()?'':'absolute';
  })();
</script>