使用css方法使footer保持在页面的最底部
使footer保持在页面的底部，是常见的需求，之前面试的时候也遇见了一个这样的问题，今天在这里记录下css实现的方式。
使footer保持在页面的底部，需要考虑header+content部分不够多的情况，在页面下方会留出部分的空白，如：
方法一：采用绝对定位方式。
html代码：
<body>
<div class="container">
<header>header</header>
<section>content</section>
<footer>footer</footer>
</div>
</body>
css代码：
body,html{
height: 100%;
}
.container{
position:relative;
padding-bottom:150px; //此次为footer的高度或大于footer的高度
width:100%;
min-height: 100%;
box-sizing: border-box;
}
header{
width: 100%;
height: 100px;
}
section{
width: 100%;
height: 300px;
}
footer{
position:absolute;
width:100%;
height: 150px;
left:;
bottom:;
}
方法二：flex布局
注意：设为flex布局之后，子元素的float、clear和vertical-align属性将失效
完成图示：
HTML代码：
<body>
<div class="container">
<header>header</header>
<section>content</section>
<footer>footer</footer>
</div>
</body>
CSS代码：
body, html{
height: 100%;
}
.container{
display: flex；
height: 100%;
flex-direction: column; //主轴方向
}
header{
width: 100%;
header: 100px;
flex: 0 0 auto; //flex： none | flex-grow flex-shrink flex-basis
} section{ width: 100%; height: 300px; flex: 1 0 auto; } footer{ width: 100%; height: 150px; flex: 0 0 auto; }
解析：
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
使用css方法使footer保持在页面的最底部的更多相关文章
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- 解决Web开发HTML页面中footer保持在页面底部问题
如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- footer始终在页面最底部的方法（问题待检验）
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- 机器学习进阶-案例实战-图像全景拼接-图像全景拼接(RANSCA) 1.sift.detectAndComputer(获得sift图像关键点) 2.cv2.findHomography(计算单应性矩阵H) 3.cv2.warpPerspective(获得单应性变化后的图像) 4.cv2.line(对关键点位置进行连线画图)
1. sift.detectAndComputer(gray, None) # 计算出图像的关键点和sift特征向量 参数说明:gray表示输入的图片 2.cv2.findHomography(kp ...
- 【技术文档】jeecg3.7.3-maven搭建环境入门
JEECG 微云快速开发平台(3.7.3)Eclipse-Maven版本手把手入门手册 官方标准开发工具:1. IDE Eclipse Java EE IDE for Web Devel ...
- ueditor富文本框图片显示
修改config.json /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /*"physicsPath":"E:/Software/apache-tomc ...
- python流程控制for循环
流程控制 for循环 #首先我们用一例子看下用while循环取出列表中值的方法 l=['a','b','c'] i=0 while i<len(l): print(l[i]) i+=1 #whi ...
- C++复习：STL之算法
算法 1算法基础 1.1算法概述 算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm> ...
- Linux：使用读写锁使线程同步
基础与控制原语 读写锁 与互斥量类似,但读写锁允许更高的并行性.其特性为:写独占,读共享. 读写锁状态: 一把读写锁具备三种状态: 1. 读模式下加锁状态 (读锁) 2. 写模式下加锁 ...
- linux 一个读写锁的异常导致的故障
环境信息: WARNING: kernel version inconsistency between vmlinux and dumpfile KERNEL: vmlinux-47.90 DUMPF ...
- [Linux]实际操作中命令 su 与 sudo 的区别
------------------------------------------------------------------------------------------------ 首先我 ...
- angularjs 做不到实时脏值查询
angularjs 做不到脏值查询 ,数据请求过来,不操作其他按钮,请求的值就是展示不出来:(相当于,只有手动触发,angularjs内部才会把脏值查询出来): 解决办法:在请求过来的值旁边加上$sc ...
- NGINX安全
http://anyun.org/a/jishuguanzhu/WEBjishu/2017/0804/8721.html