html页脚位置调整,将页脚始终控制在页面最下方的几种方法
html和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度。网页中的元素都是以body最为参考,所以有必要保持html和body的高度相同。
html,body{height:100%;}
1. 第一种方法
在body中使用两个容器,包括网页的页脚和另外一部分(container)。设置container的高度为100%;页脚部分使用 负外边距 保持其总是在最下方。
css 部分:
html, body {
height:100%;
}
.fl {
float:left;
display:inline;
}
#container {
width:100%;
height:300px;
overflow:hidden;
height:100%;
border-bottom:70px #FFFFFF solid;
}
.aside {
width:30%;
}
.article {
width:70%;
}
#footer {
height:50px;
width:100%;
clear:both;
margin-top:-50px;
border-bottom:1px solid #e0e0e0;
border-top:1px solid #e0e0e0;
}
html 部分
fddfv
容量:24M/2G
2. 第二种方法:使用绝对定位
这里我们使用到了position属性,让我们先来回顾一下position的基础用法:
position有四个参数:static | relative | absolute | fixed
position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位。
position:relative,很明白,相对元素本该位置的偏移量
#nav{
position:relative;
top:15px;
left:20px;
}
position:absolute,这时候元素已经脱离了文档,文档中已经没有自己的本该的位置了,但我们可以通过left、bottom、left和right来规定其在文档中位置。
#nav{
postion:absolute;
botton:0px;
}
我们知道万物都是相对的,元素进行上面设置了后就保证nav元素始终保持在底部了呢?nav元素离botton为0px,是哪个为参照物呢,是父级元素还还是浏览器呢,其实这里分为两种情况:
如果父级元素(父级元素的父级、父级的父级的父级......)设置postion时,则子元素此时相对的是父级的,所以当内容过多时,脚DIV不能被挤到底部去。
如果父级元素(父级元素的父级、父级的父级的父级......)没有设置postion时,则子元素此时相对的是浏览器的,所以当内容过少时,脚DIV不能被挤到底部去。
好了,下面回到正题,同样需要保持html和body的高度相同,并且body需要添加另外的一些样式,footer需要使用绝对定位。
css代码如下:
body{position:relative;height:auto !important;height:100%;min-height:100%;}
html {
height:100%;
}
body {
margin:0;
padding:0;
position:relative;
height:auto !important;
height:100%;
min-height:100%;
text-align:center;
}
.fl {
float:left;
display:inline;
}
#header {
width:100%;
height:80px;
}
#container {
width:100%;
height:300px;
overflow:hidden;
border-bottom:#FFFFFF 60px solid;
}
.aside {
width:30%;
}
.article {
width:70%;
}
#footer {
height:50px;
position:absolute;
width:100%;
clear:both;
bottom:0;
left:0;
border-bottom:1px solid #e0e0e0;
border-top:1px solid #e0e0e0;
}
html 代码:
fddfv
容量:24M/2G
3. 第三种方法:采用flexbox
flexbox——CSS3提供的一种先进布局模型,旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉,文章最后有一些扩展阅读链接,可以帮助你了解 flexbox。
我们的页面应该具备 Header、主体内容区域和 Footer,下面是该页面的 HTML
...
...
...
为了启用 flex模式,我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局)。同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
现在,我们需要调整各个区域占用的页面空间,我们将通过flex 属性来达到这一目的,该属性实际包含了三个属性,分别是:
flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率
flex-shrink:如果空间不足,元素的收缩比率
flex-basis:元素的伸缩基准值
我们希望 header 和footer 只占用他们应该占用的空间,将剩余的空间全部交给主体内容区域
header{
/* 我们希望 header 采用固定的高度,只占用必须的空间 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 将 flex-grow 设置为1,该元素会占用全部可使用空间
而其他元素该属性值为0,因此不会得到多余的空间*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* 和 header 一样,footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
这样footer 会始终显示在页面的最底部。
4. 总结
如你说见,如果是从零开始构建布局,flexbox 将会是你的得力助手。除了极少数的例外,所有的主流浏览器都支持 flexbox,就 IE 来说,IE9以后的版本都是支持的。
下面是一些学习 flexbox 布局模型不错的教程和速查表
html页脚位置调整,将页脚始终控制在页面最下方的几种方法相关推荐
- 在html用div怎样写页脚,使用div+CSS将页脚始终控制在页面最下方的方法
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页中 ...
- php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法 导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.下面就由百分网小编为大家介绍一下 ...
- php 底部页面层,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
- 业务展示类网站高保真原型模板库、企业品牌官网、公司业务介绍、产品展示及营销、首页模板、内页模板、单页模板、整站模板、导航、轮播、横幅、列表、客户、案例、页脚、动态面板、母版、页面事件、窗口函数
本作品是一套专为业务展示类网站而推出的原型模板库,适用于制作企业品牌官网.公司业务介绍.产品展示及营销等各类网站.作品中包含了符合目前主流展示类网站设计风格的丰富模板及素材,并以UI设计稿级别的高保真 ...
- html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了(中文问题,换行问题,分页,页眉页脚,水印),html+css控制pdf样式...
集成freemarker+flying-saucer-pdf+itext,通过html模板生成PDF 折腾了很久,flying-saucer-pdf终于完美解决了(中文问题,换行问题,页眉页脚,水印) ...
- Office WORD如何为每一页设置不同的页眉页脚
如下图所示,我想要为封面和目录,摘要等等设置不同的页眉页脚(一般封面和目录不需要页脚) 而从正文开始,套用相同的页眉和以页数作为页脚(注意"第一章 绪论"不是这个文档的第一页) 具 ...
- Word中只修改某一页的页眉页脚,其它页的保持不变
参考:只修改某一页页眉页脚 问题来源:在用word2013编辑页眉页脚时,所有页的页眉和页脚都同时变化,但现在只需要修改某一页的内容,其它的页不变. **解决方法:**Word 2007.Word 2 ...
- 如何用word 2007在指定页插入页码和页眉页脚?
哎,如何在word 2007中在指定页插入页眉页脚呢?这是我在写论文时遇到的一个大麻烦.翻看网络上的资料,基本上都是说03版的.利用03版的资料研究了半天(可能03版资料讲的都不好,小小自恋一下,呵呵 ...
- Word2016自第3页开始添加连续页脚(除掉封面和目录)
最近写论文需要添加页脚,需要从某一页开始添加连续页脚,主要是除了封面和目录,自正文第一页开始.使用的Word版本是2016,花了挺长时间专研,最后终于搞定,写个博客记录一下. 首先,上方栏选择&quo ...
最新文章
- 最近发现的一些Python写程序的小技巧
- 循环控制结构程序05 - 零基础入门学习C语言20
- antd 文本域超长问题_「自然语言处理(NLP)」阿里团队--文本匹配模型(含源码)...
- 服务器显示rl112,【RL-TCPnet网络教程】第13章 RL-TCPnet之TCP服务器(下)
- 功率曲线k值_什么叫离心泵的流量——功率曲线?它们之间有什么关系?
- web前端黑客技术揭秘 读书笔记
- PowerDesigner(四)-业务处理模型
- IOT---(6)Android Things 开发环境搭建
- ft232h引脚_一种基于芯片ft232h的usb接口电路的制作方法
- 总结htmlfile:未知的运行时错误
- foxpro获取html数据类型,FoxPro数据库写入html文件中
- win7远程桌面连接设置
- HTML中 src alt align 分别是什么意思?
- Cortana 设备建议
- 【云云怪】第4个项目:20以内加减法(剧情版)
- 2022年中国工业互联网安全大赛北京市选拔赛暨全国线上预选赛MISC-工控文件Writeup
- 每天一篇论文 289/365Deep Reinforcement Learning for Robotic Pushing and Picking in Cluttered Environment
- 非常感人非常激发人的潜能的信,你一定要看!
- 英语国际音标之元音发音技巧
- java版我的世界有溺尸_我的世界如何刷溺尸_minecraft溺尸陷阱制作教程 - 我的世界中文站...
热门文章
- 0xc0150002错误
- Java注解(Annotation):请不要小看我!
- antd 实现 sidebar 左侧菜单·记
- java计算机毕业设计计算机实验中心网站源码+mysql数据库+系统+lw文档+部署
- 零基础学习java(你真的热爱编程吗?)
- 转: 大年三十整理的asp.net资料!(经典)
- 解读论文EPSILON: An Efficient Planning System for Automated Vehicles in Highly Interactive Environments
- 用手机访问计算机共享资源,手机访问电脑文件 手机与电脑如何共享数据?AirShareUp 云悦享...
- 免费计算机网络同传系统,ghost网络同传系统.doc
- 自定义Font Icon