<html>
<head></head>
<body>
<div class="page-wrapper">
<div class="page-content">内容部分</div>
</div>
<footer class="footer">这里是页面底部</footer>
</body>
</html> //css
html, body{
  height: %;
}
footer{
height: 50px;
line-height: 50px;
background-color: #62f1c3;
text-align: center;
}

1、position: fixed

//css
.page-wrapper{
  padding-bottom: 50px;
}
.footer{
  position: fixed;
  width: 100%;
  bottom: 0;
}

2、footer前的元素使用负margin-bottom

.page-wrapper{
height: 100%;
padding-bottom: 50px;
margin-bottom: -50px;
overflow-y: auto;
}

3、footer元素使用负margin-top


 
.page-wrapper{
height: 100%;
padding-bottom: 50px;
overflow-y: auto;
}
.footer{
margin-top: -50px;
}

4、使用calc()计算内容部分的高度

.page-wrapper{
height: calc(% - 50px);
overflow-y: auto;
}

5、使用flex-box布局

body{
display: flex;
flex-direction: column;
} .page-wrapper{
flex: auto;
overflow-y: auto;
}
.footer{
flex: auto;
}

css固定footer到浏览器底部的方法的更多相关文章

  1. 实现自适应位置--footer紧贴浏览器底部

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>紧贴浏览 ...

  2. IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

  3. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  4. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

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

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

  6. CSS实现Footer固定底部,超过一屏自动撑开

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

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

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

  8. 固定一个div在浏览器底部

    转自原文 如何固定一个div在浏览器底部   方法1:使用CSS绝对定位 div{ position:absolute; bottom:0px; left:0px; } 方法2:使用CSS固定定位 d ...

  9. footer始终在页面最底部的方法(问题待检验)

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

随机推荐

  1. EF 求和 GroupBy多个字段

    GroupBy根据多个字段分组使用方式: 一.使用扩展方法 query.GroupBy(q => new { q.Year, q.Month }) .Select(q => new { Y ...

  2. AutoMapper在项目中的应用

    一.先说说DTO DTO是个什么东东? DTO(Data Transfer Object)就是数据传输对象,说白了就是一个对象,只不过里边全是数据而已. 为什么要用DTO? 1.DTO更注重数据,对领 ...

  3. 如何在idea中设置Tomcat虚拟路径

    设置项目的根路径: 设置指定文件的在Tomcat中的虚拟路径: 代码: String fileName = MyFileUtil.getFileName(uploadFileName); File f ...

  4. 设计模式(20)--State(状态模式)--行为型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 状态模式,又称状态对象模式(Pattern of Objects for States),状态模式 ...

  5. OSGI企业应用开发(十三)OSGI Web应用开发(二)

    上篇文章介绍了OSGI Web应用的两种开发模式,并把Jetty应用服务器以Bundle的形式整合到Equinox容器中,已这种模式开发Web应用,所有的应用程序资源,例如Servlet.JSP.HT ...

  6. php api 接口输出json 数据

    页面调用接口,简单写个api 试试 如下 <?php $arr = array( array('url'=>'https://baidu.com'), array('map'=>'h ...

  7. Windows上PostGIS(压缩版)安装

    PostGIS安装 1.软件下载 postgresql-9.6.1-1-windows-x64-binaries.zip https://www.postgresql.org/download/win ...

  8. JS获取填报扩展单元格控件的值

    1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...

  9. window下安装RabbitMQ

    RabbitMQ: MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消 ...

  10. Django 处理modelform错误信息

    cp:https://blog.csdn.net/qq_34964399/article/details/79781071