浮动页头页脚,内容自适应高度(手机端常见)
第一次写博客,只展示自己的小发现,至于兼容性和泛用性以后再考虑吧。
对新技术本人的态度一向都是大胆接受,然后从中找些乐子,在暧昧不清之间终究会将其抛弃。
对 flex 等布局方式的喜爱也许也只是短暂的,不过技术发展,总有些可以一起好好玩耍的时光的。
基础的已经玩过了,来玩点实用的,比如这个:
手机版页面总有个页眉页脚,放些logo和按钮菜单什么的,一般我们会选用定位的方式,ok,it's ok
<div id="main"> <header></header> <main></main> <footer></footer> </div>
header, main, footer { position: absolute; left: 0; right: 0; } header { top: 0; height: 50px; background: pink; } main { top: 50px; bottom: 50px; background: lightyellow; overflow-y: auto; -webkit-overflow-scrolling: touch; } footer { bottom: 0; height: 50px; background: lightcoral; }
那选用 flex 布局又有什么好处呢,其实也没啥好处啦,就是让 <main> 少设了个 top 和 bottom 而已,显得比较响应,仅此而已
甚至可以不设页眉页脚的高度,那就更响应了不是吗?
#main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; } header { height: 50px; flex-shrink: 0; background: pink; } main { flex-grow: 1; background: lightyellow; overflow-y: auto; -webkit-overflow-scrolling: touch; } footer { height: 50px; flex-shrink: 0; background: lightcoral; }
效果图:
备注:鉴于 flex 的兼容性一般的问题,别忘了加 -webkit- 和 -moz- ,如果你也和我一样懒,试试 prefixfree.min.js 或者 sublime 的 prefixfree 插件吧。