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

通常在页面中，需要使页脚 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 _ ...