在设计网站的时候,如果你某个页面的内容没有满屏,那你的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固定在浏览器底部的更多相关文章

  1. 让footer固定在页面底部(CSS-Sticky-Footer)

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  2. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  3. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  4. 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器?

    一个可以用的CSS驱动的可粘在底部的Footer 我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底 ...

  5. Footer固定在页面底部(CSS)

    <style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...

  6. 在不适用fixed的前提下,当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  7. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  8. 让footer固定在页面(视口)底部(CSS-Sticky-Footer)

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  9. css固定footer到浏览器底部的方法

    <html> <head></head> <body> <div class="page-wrapper"> <d ...

随机推荐

  1. ElasticStack学习(十):深入ElasticSearch搜索之QueryFiltering、多/单字符串的多字段查询

    一.复合查询 1.在ElasticSearch中,有Query和Filter两种不同的Context.Query Context进行了相关性算分,Filter Context不需要进行算分,同时可以利 ...

  2. springboot序

    springboot序 1.写在前面 (1) 前段时间把文章分了下类(说的是专栏,谈不上),分了三类:springboot.springcloud.mpp数据库greenplum,后来给springc ...

  3. [PTA] 1001. 害死人不偿命的(3n+1)猜想 (Basic)

    import java.util.*; public class Main { public static void main(String[] args) { Scanner sc = new Sc ...

  4. python函数对象-命名空间-作用域-02

    函数对象 函数是第一对象: # 函数名指向的值可以被当做参数传递 函数对象的特性(*****灵活运用,后面讲装饰器会用到) 函数名可以像变量一样被传递 # 变量可以被传递 name = 'jason' ...

  5. Java用户程序

    Java的用户程序分为两类:Java Application和Java Applet. 这两类程序在程序结构和执行机制上有一定的差异. Java Application是完整的程序,需要独立的Java ...

  6. Golang高效实践之泛谈篇

    前言 我博客之前的Golang高效实践系列博客中已经系统的介绍了Golang的一些高效实践建议,例如: <Golang高效实践之interface.reflection.json实践>&l ...

  7. Java学习-内存划分及内存的调用关系

    一.JAVA内存划分 JAVA的内存可以划分为五个部分:堆.栈.方法区.本地方法区和寄存器. 堆(Heap):凡是new出来的东西都在堆中 如: integer = new Integer(2) // ...

  8. 【Android】Genymotion 模拟器 Unable to create virtual device

    安装 Genymotion 模拟器的时候报了这个错误,如下: 后来找到了解决方法,见下图: 在 Setting -> Network, 勾选 Use HTTP Proxy, HTTP Proxy ...

  9. SCI论文的时态

    如果有的杂志对时态有要求,则以下所述都没有用了. 有些杂志也会专门有些比较“特别”的要求,比如Cell,要求Abstract全部使用一般现在时. 英语谓语动词时态共有16种,在英文科技论文中用得较为频 ...

  10. idea 2018.3.4安装破解

    电脑环境:win10 64位 1.idea官网下载: 链接:https://www.jetbrains.com/idea/,如下图: 2.JDK官网下载: 链接:https://www.oracle. ...