在设计网站的时候,如果你某个页面的内容没有满屏,那你的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. Spring Cloud 之 Zuul基础.

    一.概述  API 网关是一个更为智能的应用服务器,它的定义类似于面向对象设计模式中的 Facade 模式,它的存在就像是整个微服务架构系统的门面一样,所有的外部客户端访问都需要经过它来进行调度和过滤 ...

  2. 基于TCP协议的套接字编程

    06.26自我总结 1.关于Socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在 ...

  3. 简单web网页与SSM后台交互

    简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...

  4. C#编程.循环的中断

    1 循环的中断 break-立即终止循环(继续执行循环后面的第一行代码) continue-立即终止当前的循环(继续执行下一次循环) goto-可以跳出循环,到已标记好的位置上(如果希望代码易于阅读和 ...

  5. JAVA项目从运维部署到项目开发(五. Nginx)

    <Nginx与Nginx-rtmp-module搭建RTMP视频直播和点播服务器>一文简单介绍了关于直播数据流的nginx相关配置,下面简单介绍下各种项目如何配置nginx. web项目. ...

  6. git取消链接并删除本地库

    有的时候我们需要删除从GitHub上克隆下来的库 从github上clone一个仓库: git clone git@github.com:USERNAME/repo.git 在本地目录下关联远程rep ...

  7. CentOS7 修改PATH环境变量的方法

    vim /etc/profile 添加: PATH=/root/.config/composer/vendor/bin:$PATH 保存,退出,运行: source /etc/profile 检查: ...

  8. Hadoop自学系列集(四) ---- Hadoop集群

    久等了,近期公司比较忙,学习的时间都没有啊,到今日才有时间呢!!!好了,下面就跟着笔者开始配置Hadoop集群吧. hosts文件和SSH免密码登录配置好了之后,现在进入Hadoop安装目录,修改一些 ...

  9. spark 源码分析之二十二-- Task的内存管理

    问题的提出 本篇文章将回答如下问题: 1.  spark任务在执行的时候,其内存是如何管理的? 2. 堆内内存的寻址是如何设计的?是如何避免由于JVM的GC的存在引起的内存地址变化的?其内部的内存缓存 ...

  10. 戴尔PowerEdge T110 Ⅱ服务器U盘安装Windows Server 2019 DataCenter

    一. 下载准备 准备工作——下载Microsoft Windows Server 2019 官方简体中文激活版 (MSDN)原版iso镜像 准备工作——安装刻录软件UltraISO,单文件绿色版就够用 ...