html5自动把某个层放在屏幕底部,告诉你一个将 footer 保持在底部的最好方法

当你在布局网页时,有可能会遇到类似下面的这种情况

4896e6936ce3

broken_layout.png

导致这一问题的原因是页面内容太少,无法将内容区域撑开,从而在 footer 下面留下一大块空白。

本文将介绍一种现代化的方法,�确保 footer 始终处于页面的底部。

解决方法

�解决该问题的最好方法是采用 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 会始终显示在页面的最底部。

4896e6936ce3

correct_layout-e1459357917514.png

结论

如你说见,如果是从零开始构建布局,flexbox 将会是你的得力助手。除了极少数的例外,所有的主流浏览器都支持 flexbox,�就 IE 来说,IE9以后的版本都是支持的。

下面是一些学习 flexbox 布局模型不错的教程和速查表

4896e6936ce3

fetalk_qrcode.jpg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356612.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前后数据交互(ajax) -- 初始化页面表格

// 初始化员工信息列表 function loadpage ( pageNum ) {var keywords $("#keywords").val();$("#tbody").html("");if ( isNaN(pageNum) ) {pageNum 1;}$.$.ajax({type: GET,url: contextPath "/getaccountList/" pageNum "…

html的扇形代码导航,CSS3--利用transform和transition属性制作扇形导航

在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明。一、transition属性说明接下来简单分析一下transition这个属性的定义以及子属性。1)ansition-property …

UCI数据

http://archive.ics.uci.edu/ml/datasets.html?format&task&att&area&numAtt&numIns&type&sortinstDown&viewtable转载于:https://www.cnblogs.com/zangrunqiang/p/5999238.html

常见的误解:这会创建多少个对象?

总览 一个常见的问题是一段代码创建多少个对象或多少个字符串。 答案通常不是您的想法,也不是您真正需要知道的。 了解何时创建对象是很有用的,但是有很多其他因素通常要考虑的重要得多,这可能意味着应用程序总数不是您所想的。 字符串不是一…

cvs配电保护断路器_电工电器(三)-配电电器-断路器类-剩余电流保护断路器

本文文字836,阅读时间6分钟左右。此系列文章 从配电电器的大类等进行慢慢阐述,有不足的地方 欢迎大家相互探讨交流。配电电器,顾名思义就是进行电力分配的设备。电,从发电机出来之后,由总线输出,不可能直接…

html模块殃射,【Web前端问题】webpack打包后,module模块中的函数无法在html标签的事件中调用?...

折腾了好久,求大佬指点~~最近才开始接触webpack以及ES6的module,可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数,在HTML的中用onclick事件调用这个函数。module模块代码:— base.js —…

Linux网络参数设置

1、ifconfig 查询、设定网络卡与ip 设置桥接网络 # vi /etc/sysconfig/network-script/ifcfg-br0DEVICEbr0 #设备名称BOOTPROTOstatic #设置静态地址IP6INITnoMTU1500 #设置MTU连接数 (可以设定不同的MTU数值)NM_CONTROLLEDnoONBOOTyesIPADDR…

delhpi7 tcombobox清楚重复项_专利数据统计中需要搞清楚的首要问题(2)

上一篇专利数据统计中需要搞清楚的首要问题(1)介绍了通过合并申请号避免重复统计,理清了专利篇数和专利件数的问题,那么还有一类统计就是对发明项数的统计,这里就涉及到对同一项发明的重复统计问题。上一篇介绍的相同申请号但不同公开号的专利…

【Electron】Electron开发入门(八):自定义electron框架外壳(shell)的菜单(Menu)...

1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu require(electron).Menu; var template [{label: 关闭,click: function () { win.close();console.log("关闭")},// s…

交通大数据应用细分_盈海科技 | 交通大数据可视化“掘金”数据价值

面对日益拥堵的交通状况智能交通布局虽在不断完善但交通管理依旧收效甚微问题究竟出在了哪里?数据独立存储难以融合应用数据内在规律难寻数据可视化程度低……问题繁多 困难重重怎么办???交通大数据可视化解决方案上岗啦&#xff…

书评– Kubernetes Up&Running,作者:Kelsey Hightower

欢呼! 正如我在以前的帖子中所写的那样,当您开始研究和使用所有这些新颖的,有光泽的容器/编排技术时,很有可能最终导致您的翻译“迷失”。 很多信息,很多技术,很多开发 ,很多承诺,很…

relative布局html,CSS的四种布局方式static/relative/fixed/absolute

staticstatic布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。relative相对布局是相对其在标准文档流中的位置而言的。设置其top/left/bottom/right属性会使该元素脱离标准文…

MFC CListCtrl

列名、行内容的添加、删除。 据列名、行内容长度设置列宽。 排序。 提升权限 BOOL CDemoListCtrlApp::EnableDebugPrivilege() { HANDLE token; if(!OpenProcessToken(GetCurrentProcess(),TOKEN_ADJUST_PRIVILEGES,&token)) { return FALSE; } TOKEN_PRIVILEGES tkp…

快手用旺旺瓶子做机器人_100品牌入榜,在快手的品牌运营怎么做?|11月快手品牌新势力榜揭晓...

11月榜单见证了许多新入驻快手的品牌迅速成长。母婴品牌「安慕斯」实现垂类专业场景剧情化,引起用户发注,激发用户参与,单月涨粉突破60万;服饰箱包运动垂类下的珠宝品牌「DR钻戒」以“一生唯一真爱”的理念抢占消费者心智&#xf…

认识计算机ppt课件游戏,《认识计算机》PPT课件

《认识计算机》PPT课件 认知主义认为 学习是个体对环 境的作用,而并不仅是环境刺激引起的行为改变;环境只能提供潜在刺激,至于这些潜在刺激是否受到注意或被加工,这主要取决于学习者内部的认知结构。 认 识 计 算 机 认知主义认为…

UITextView: 响应键盘的 return 事件(收回键盘)

UITextView: 响应键盘的 return 事件(收回键盘) 此篇文章将要介绍UITextView: 响应键盘的 return 事件(收回键盘)的相关介绍,具体实例请看下文 UITextView: 响应键盘的 return 事件 UITextFieldDelegate代理里面响应re…

hashdos_调查HashDoS问题

hashdos近一个月前,我就如何在不与供应商互动的情况下临时解决 28C3上出现的HashDoS问题或其他代码缺陷发表了一些想法。 现在是时候更深入地研究复杂性攻击并查看源了。 我完全假设java.util.HashMap和java.util.Hashtable是受此攻击影响的最常用的Java数据结构&am…

ssb门限_画出滤波法ssb信号调制器模型,并说明低通和高通滤波器分别得到哪个边带信号...

匿名用户1级2016-05-25 回答如果输出已调信号的频谱和输入调制信号的频谱之间满足线性搬移关系,则称为线性调制,通常也称为幅度调制。线性调制的主要特征是调制前后的信号频谱从形状上看没有发生根本变化,仅仅是频谱的幅度和位置发生了变化。…

!doctype html报错h5,【Web前端问题】javascript import 报错

初学者, 想知道错误出在哪里,找到的资料都介绍的以下是我精简后的代码内容,错误提示在 main.js import那一行错误提示为:SyntaxError: Unexpected token ‘{‘. import call expects exactly one argumentindex.htmlLearnJavscriptbody{backg…

BZOJ1433 ZJOI2009 假期的宿舍 二分图匹配

1433: [ZJOI2009]假期的宿舍 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2375 Solved: 1005[Submit][Status][Discuss]Description Input Output Sample Input 1 3 1 1 0 0 1 0 0 1 1 1 0 0 1 0 0Sample Output ˆ ˆHINT 对于30% 的数据满足1 ≤ n ≤ 12。对于100% 的…