最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果

解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可以建立具有适应性的布局。

下面我们代码走起来

<body>
<div id="header">...</div>
<div id="content">...</div>
<div class="footer">...</div>
</body>
html{
height: 100%;
} body{
display: flex;
flex-direction: column;
height: 100%;
} #header{
/* 我们希望 header 采用固定的高度,只占用必须的空间 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
} #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;
}

  我们利用flex-deraction:column将页面结构竖向排列,(flex默认是横向排列的),同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。  

上面用到了flex包含的3个属性,我来介绍一下他们的用途:

  • flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率
  • flex-shrink:如果空间不足,元素的收缩比率
  • flex-basis:元素的伸缩基准值

  也就是header 和footer 只占用他们应该占用的空间,将剩余的空间全部交给主体内容区域

好啦,到这里,无论页面内容是多是少,都可以保证footer乖乖的待在底部了。

PC端无论页面有没有完全撑开把footer保持在最底部(不用定位)的更多相关文章

  1. PHP项目实现手机端和PC端的页面切换

    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...

  2. 检测到是移动端还是PC端进入页面,加载不同样式表现

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...

  3. 微信PC端授权页面提示授权入口所在域名为空

    做第三方微信平台的时候做授权页面,用window.open方法从第三方平台页面打开新的授权标签页. 在IE浏览器上出问题,提示如下: 在chrome和firefox浏览器上正常. 搜了一下,发现微信是 ...

  4. pc端html页面到移动端等比缩放

    head标签里面加这个<meta name="viewport" content="user-scalable=yes">

  5. 移动端和PC端页面常用的弹出层

    我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...

  6. js判断PC端 移动端 并跳转到对应页面

    一.PC端跳转到移动端 html页面: <script>var webroot="/",catid="{$catid}",murl="m/ ...

  7. 手机端的表单验证和PC端的不同

    1.手机端:由于页面小的局限性,表单验证从上到下依次进行,如果上一个验证不通过,则给出错误提示,代码中return回去,不必进行下一个的校验: 2.PC端:页面范围大,一般是在表单的后面或者下面,提示 ...

  8. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

  9. asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转

    很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问PC页面的时 ...

随机推荐

  1. JS之理解继承

    JS之理解继承:https://segmentfault.com/a/1190000010468293 1.call继承,也叫借用构造函数.伪造对象或是经典继承.call继承回把父类的私有属性和方法继 ...

  2. CAS单点登录系统--进阶

    2.CAS服务端数据源设置 2.1需求分析 我们现在让用户名密码从我们的优乐选的user表里做验证 2.2配置数据源 (1)修改cas服务端中web-inf下deployerConfigContext ...

  3. HDU 3466 Proud Merchants 带有限制的01背包问题

    HDU 3466 Proud Merchants 带有限制的01背包问题 题意 最近,伊萨去了一个古老的国家.在这么长的时间里,它是世界上最富有.最强大的王国.因此,即使他们的国家不再那么富有,这个国 ...

  4. linux下occi操作oracle数据库,中文乱码的问题

    转载:http://www.linuxidc.com/Linux/2008-02/11238.htm 前几日调通了OCI连接数据库的问题后,用Oracle自带的例子测试了一下,能正常读取数据(都是英文 ...

  5. 计算机体系结构总结_Pipeline

    Textbook:<计算机组成与设计——硬件/软件接口>  HI<计算机体系结构——量化研究方法>          QR 在前面一节里我们有了一块简单的RISC CPU,包括 ...

  6. js 全世界最短的IE浏览器判断代码

    var ie = !+"\v1"; 仅仅需要7bytes!参见这篇文章,<32 bytes, ehr ... 9, ehr ... 7!!! to know if your ...

  7. 解决nodejs环境下端口号被占用的方法

    假设被占用的端口号是8081 1.进入cmd命令窗口 输入netstat -ano|findstr "8081" cmd窗口给我的信息尾部有一个和端口8081对应的PID值 '51 ...

  8. MySQL索引优化与分析(重要)

    建表SQL CREATE TABLE staffs ( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR (24) NULL DEFAULT '' COM ...

  9. 图解Qt安装(Windows平台)

    http://c.biancheng.net/view/3858.html 本节介绍 Qt 5.9.0 在 Windows 平台下的安装,请提前下载好 Qt 5.9.0.不知道如何下载 Qt 的读者请 ...

  10. verilog中的timescale

    `timescale是Verilog HDL 中的一种时间尺度预编译指令,它用来定义模块的仿真 时的时间单位和时间精度.格式如下: `timescale  仿真时间单位/时间精度 注意:,不能为其它的 ...