通常在页面中，需要使页脚 footer 部分始终处于底部。当页面高度不够 100% 时， footer 处于页面最底部，当页面内容高于 100% 时，页脚元素可以被撑到最底部。

方法一：绝对定位

旋转六面体动画

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

html {

height: 100%

}

/* 这里footer的父元素为 body, 实际应用中，不一定要以body为父元素，只要确保footer的父元素的最小高度为100%就行 */

body {

position: relative;

min-height: 100%;

padding: 0;

padding-bottom: 40px;

}

#footer {

height: 40px;

background: #eee;

width: 100%;

position: absolute;

bottom: 0;

}

content

content

content

content

content

footer footer footer

方法二: flex 布局

footer

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

html {

height: 100%

}

body {

height: 100%;

display: flex;

flex-direction: column;

}

#header {

height: 40px;

background: red;

flex: 0 0 auto;

}

#box {

background: #eee;

flex: 1 0 auto;

}

#footer {

height: 40px;

background: rgb(129, 129, 201);

flex: 0 0 auto;

}

header header header

content

content

content

content

content

footer footer footer

CSS-设置Footer始终在页面底部

Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

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

1.HTML基本结构

使用css方法使footer保持在页面的最底部

使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...

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

一.css方法

让footer始终位于页面的最底部

http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码:

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

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

页面内容不够高footer始终位于页面的最底部

相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

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

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

方法一:footer高度固定+绝对定位 HTML代码:

头部中间内容&g ...

随机推荐

导出数据到Excel --使用ExcelReport有感

先看图,这是几个月前用NPOI写的导出数据到Excel,用了上百行代码,而且难控制,导出来也比较难看 excel打开的效果 下面是我用ExcelReport类库导出到Excel的操作 1.首先引用Ex ...

css content之counter-reset、content-increment

万万没想到,写了快三年前端,有不会用的css,居然还有完全没听过.见过的css属性,而且还是CSS2的内容! 关于counter-reset.content-increment两个属性的详解可以参看张 ...

百思不得其解—这些年做Web开发遇到的坑？

请教一个问题:Bootstrap 模态框modal里面的嵌入 iframe ,然后iframe 里面载入的是优酷的视频 ,现在的问题是:这个模态框在谷歌浏览器上面可以播放出视频,而在ff浏览器里面无 ...

C++11中int,float,double与string的转化

在C++11中可以使用std::to_string()函数将数值转换为string格式,十分方便. 以下部分来选自cplusplus.com. std::to_string string to_str ...

tomcat + jenkins启动tomcat后打开jenkins页面提示404错误的解决方案

首先下载tomcat和jenkins,将下载的jenkins2.12 war放到tomcat的webapps文件夹下后执行/bin文件夹下的start启动后,打开http://localhost:80 ...

PLSQL Developer软件使用大全

PLSQL Developer软件使用大全 第一章 PLSQL Developer特性 PL/SQL Developer是一个集成开发环境,专门面向Oracle数据库存储程序单元的开发.如今,有越来越 ...

GAN︱GAN 在 NLP 中的尝试、困境、经验

GAN 自从被提出以来,就广受大家的关注,尤其是在计算机视觉领域引起了很大的反响,但是这么好的理论是否可以成功地被应用到自然语言处理(NLP)任务呢? Ian Goodfellow 博士 一年前,网友 ...

VS中使用.NET Reactor进行代码混淆

.NET Reactor相信大家都不陌生,网上使用教程也很多.但绝大多数都只介绍到软件的使用,而对于在VS中使用介绍的不多. 首先,在.NET Reactor的Help中Add In,如下图. 重启V ...

python：unittest之跳过测试和预期失败的用例

在利用单元测试框架执行测试用例的过程中,有时只需要执行一部分用例,或者跳过某些暂不需要执行的用例,python的unittest框架就内置这样的功能. 前面的博客介绍了unittest框架的测试用例加 ...

python基本数据结构栈stack和队列queue

1,栈,后进先出,多用于反转 Python里面实现栈,就是把list包装成一个类,再添加一些方法作为栈的基本操作. 栈的实现: class Stack(object): #初始化栈为空列表 def _ ...

html 停留页面底部,HTML 中使 footer 始终处于页面底部相关推荐

  1. footer始终在页面最底部的方法（问题待检验）

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

  2. 如何将footer标签固定在底部_如何让footer标签置于页面最底部

    这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望foo ...

  3. 怎么让footer始终在页面底部？

    当页面内容少时,footer页尾显示在屏幕的底部(一般会向上浮动,在屏幕的中间). 当页面内容多是,footer页尾也不会固定在屏幕的下方而是显示在整个页面的底部. 怎样才能实现以上两种效果呢 代码如 ...

  4. html里按钮始终在底部,详解footer始终位于网页底部的方法介绍

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

  5. css让footer始终位于页面的最底部

    html代码结构为: <div class="container"> <div cass="header"></div> & ...

  6. java web 默认页面配置文件_Tomcat中配置全局的错误页面（如404）+删除Tomcat中webapps目录下的自带项目，防止Tomcat默认文件泄露...

    进入tomcat目录中conf文件编辑web.xml,将下面代码复制到文件末尾,如下 400 /error.html 404 /404/404.html 500 /404/500.html 2.添加4 ...

  7. 让底部始终在浏览器底部

    当内容不足够高时,使footer始终处于底部,其中一种方法 html代码 <div class="wrapper"><div class="conten ...

  8. html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法

    如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...

  9. 如何将footer标签固定在底部_让footer固定在页面底部

    最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的 ...

最新文章

  1. 十大Material Design开源项目
  2. 通过扩展改善ASP.NET MVC的验证机制[实现篇]
  3. 【Greenplum异常】数据库报错 could not create temporary file No space left on device（求解决）
  4. JS 对select动态添加options操作[IEFireFox兼容]
  5. Step by Step to download a material from ERP via request download
  6. idea可以使用flash框架吗_可以使用 C# 的 Web 前端框架 Blazor
  7. Java系列之雪花算法和原理
  8. VS2017新建HTML项目,VS2017创建项目模板和项模板（方便实用)
  9. await js 报错_async/await优雅的错误处理方法总结
  10. 接口自动化测试框架搭建(6、对接口进行mock的方法封装)--python+HTMLTestRunnerCN+request+unittest+mock+db
  11. WinForm应用实战开发指南 - 快速开发一个WinForm应用系统
  12. CentOS7 安装 oracle 10g
  13. 西南科技大学oj题66
  14. 几种码农使用的等宽字体比较——让自己的眼睛爽起来！
  15. 开源IT监控系统对比
  16. 海康摄像头拍照(java版,拿走即用)
  17. linux区别sata和sas,企业级硬盘sata与sas接口区别，该怎么选择
  18. pip常用方法与升级到18.0升级报错问题
  19. 法国老医生和他“驱动”的摄像头们
  20. Redmi K20 安卓9跨版本刷第三方ROM

热门文章

  1. 学习Linux系统编程、网络编程的方法
  2. How to recognise a good programmer
  3. 冈撒雷斯数字图像处理学习笔记
  4. Python关键字大全
  5. CentOS7安装K8S V1.23.3
  6. qpython3h教程_Python3实现AI五子棋【初版】|python3教程|python入门|python教程
  7. kafka完整集群安装
  8. 如何解决selenium被检测，实现淘宝登陆
  9. Win7安装.net4.0失败如何解决_离水的鱼_新浪博客
  10. 国标GB28181协议视频智能分析平台EasyCVR，构建智慧企业AR云景解决方案