一起CSS

当前位置:一起CSS > CSS, 前端技术 > 文章正文

用js让“footer”处于底部

日期:2008-12-2 分类:CSS,前端技术

当一个网页比较简单,内容比较少使得网页不足浏览器高的时候,为了显示更合理,我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》,现在来用 javascript 来实现这种效果。

基本思路

以常见的架构来为例,容器 #container 内有上中下三部分,分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度,如果容器 #container 的高度小于浏览器的高度,就让 #footer 绝对定位到底部。

代码实现

XHTML 代码:

<div id="container">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>

javascript 代码:

<script language="javascript" type="text/javascript">
window.onload = function(){
var containerHeight = document.getElementById("container").scrollHeight;
var footer = document.getElementById("footer")
var allHeight = document.documentElement.clientHeight;
if(containerHeight < allHeight){
footer.style.position = "absolute";
footer.style.bottom = "0"
}
else{
footer.style.positong = "";
footer.style.bottom = "";
}
}
</script>

解释一下两个重要的属性 scrollHeight 和 clientHeight:

scrollHeight 层的实际高度,实际有多高就多高,与当前网页高度无关;

clientHeight 层在当浏览器屏幕的高度,非该层的实际高度。

为了让例子效果更明显,再加上一些 CSS 代码:

*{
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}

这样,如果网页的高度小于浏览器的高度,那么 footer 部分就会定位到底部。

查看效果

查看:480 评论:没有评论 标签:

相关日志

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved