欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:1078
  2. 浏览总数:14,721,603
  3. 评论:4201
  4. 分类目录:114 个
  5. 注册用户数:7085
  6. 最后更新:2019年12月4日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
开发爱好者社区:
bigdata_ai

网站设计:将Footer固定在浏览器底部

  在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部。

function fixFooter(){
    var mainHeight = document.getElementById('main').offsetHeight;
    var  height = document.documentElement.clientHeight 
                         - document.getElementById("header").offsetHeight 
                         - document.getElementById("footer").offsetHeight;
    if(mainHeight  < height ){
        document.getElementById('main').style.height= height + "px";
    }
}

  其中,main是你网页内容的id,header是菜单的id,footer是footer的id。当网站内容的高度小于多少时,那么获取header和footer的高度,并用document.documentElement.clientHeight减去他们,剩下的就是main的高度。
  但是当你运行代码的时候,你会发现footer先是离底部有点距离,然后才到底部的,这样看起来很难看,可以加上下面语句隐藏这个过程,使得网页一打开footer就在底部。

document.getElementById('main').style.overflow="hidden";
  我们可以通过JavaScript获取很多关于浏览器的属性,这里列出各个属性的获取及其含义。
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

  当然,如果你想让footer一直在浏览器底部,那么可以通过CSS来解决

#footer{
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  bottom: 0;
  margin-bottom: 0;
}

  这样footer会一直在浏览器底部。

  这里再提供一种方法:完全通过css达到的。

<footer class="footer">
      <div class="container">
        <p class="text">版权所有,翻版不究! https://www.iteblog.com</p>
      </div>
</footer>

下面是css:

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text {
  margin: 20px 0;
}

  这样可以在页面文章内容没有满的时候一直使得footer在底部。

本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【网站设计:将Footer固定在浏览器底部】(https://www.iteblog.com/archives/1205.html)
喜欢 (4)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!