浮动页头页脚，内容自适应高度（手机端常见）

第一次写博客，只展示自己的小发现，至于兼容性和泛用性以后再考虑吧。

对新技术本人的态度一向都是大胆接受，然后从中找些乐子，在暧昧不清之间终究会将其抛弃。

对 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 插件吧。

 

转载于:https://www.cnblogs.com/foreverZ/p/flex-at-mobile-header.html