PC端无论页面有没有完全撑开把footer保持在最底部（不用定位）
最近在写项目，有的页面没有占到一屏，然后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保持在最底部（不用定位）的更多相关文章
- PHP项目实现手机端和PC端的页面切换
目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...
- 检测到是移动端还是PC端进入页面，加载不同样式表现
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...
- 微信PC端授权页面提示授权入口所在域名为空
做第三方微信平台的时候做授权页面,用window.open方法从第三方平台页面打开新的授权标签页. 在IE浏览器上出问题,提示如下: 在chrome和firefox浏览器上正常. 搜了一下,发现微信是 ...
- pc端html页面到移动端等比缩放
head标签里面加这个<meta name="viewport" content="user-scalable=yes">
- 移动端和PC端页面常用的弹出层
我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...
- js判断PC端 移动端 并跳转到对应页面
一.PC端跳转到移动端 html页面: <script>var webroot="/",catid="{$catid}",murl="m/ ...
- 手机端的表单验证和PC端的不同
1.手机端:由于页面小的局限性,表单验证从上到下依次进行,如果上一个验证不通过,则给出错误提示,代码中return回去,不必进行下一个的校验: 2.PC端:页面范围大,一般是在表单的后面或者下面,提示 ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
- asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转
很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问PC页面的时 ...
随机推荐
- 操作系统 - Windows操作系统 - WindowsXP - 安装|命令|使用 - 汇总
开启ipc$ net share ipc$ 开启admin$ net share admin$ 端口 开放445端口对外访问系统层面:regedit -> 搜索HKEY_LOCAL_MACHIN ...
- docker--docker 容器操作
6 docker 容器操作 容器是 docker 镜像的运行时实例. 6.1 创建容器 docker run [options] image command [ARG...]options选项: ‐i ...
- python面试题--初级（二）
基础不牢,地动山摇,面试的时候经常会被问到一些平时基础的很容易被忽视的知识点,所以重在积累,多看多背深入理解,才能在某一天工作中豁然开朗恍然大悟. 面试题不仅仅为了应付面试,更是知识点的一个梳理总结归 ...
- [转帖]又一国产x86处理器可大规模上市：Intel至强核心 安全监测管控
又一国产x86处理器可大规模上市:Intel至强核心 安全监测管控 https://www.cnbeta.com/articles/tech/850525.htm 不知道是不是有一起汉芯事件 国产CP ...
- Linux文件与目录操作 ls 命令（2）
说文件操作是最频繁地操作也不为过,在Linux中,使用ls命令可以列出当前目录中所有内容,本篇就先说说ls命令.本文所说的文件指文件和目录. ls命令常用选项 -a:显示指定目录下所有子目录与文件,包 ...
- 取（2堆）石子游戏 HDU 2177 博弈论
取(2堆)石子游戏 HDU 2177 博弈论 题意 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中 ...
- P1012拼数
这是一道字符串的普及—的题. 输入几组数字,怎样组合起来才可以使最后结果最大.一开始这道题类似于那道删数问题,每次删除递增序列的最后一位,达到最小.而这个题我也是想到了贪心做法,于是想逐位判断,让在前 ...
- CSS 属性小记
1. 选择器的介绍 普通选择器 标签选择器:p{...} id选择器:#xiaoming{...} 类选择器:.class{...} 通用选择器: *{...}, 对所有的元素都有效 伪类选择器 Lo ...
- 五、JVM — 类加载器
回顾一下类加载过程 类加载器总结 双亲委派模型 双亲委派模型介绍 双亲委派模型实现源码分析 双亲委派模型的好处 如果我们不想要双亲委派模型怎么办? 自定义类加载器 推荐 回顾一下类加载过程 类加载过程 ...
- C#修改电脑桌面图
win32helper public class Win32Helper { [DllImport("user32.dll", EntryPoint = "SystemP ...