flex上下固定中间滚动布局

最新推荐文章于 2024-04-18 11:08:14 发布

有水有房子

最新推荐文章于 2024-04-18 11:08:14 发布

阅读量645

点赞数 1

本文链接：https://blog.csdn.net/jgftyfc/article/details/86616022

版权

传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。

上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果，而在手机端遇到的问题如下：

ios4 和 android2.2 以下不支持 position:fixed
ios 和 android2.3 以下不支持 overflow:auto
ios4 和 android 不支持 overflow-scrolling

最严重的结果是：滚动区域内容无法拖动

对于 ios4 和 android2.2 以下不支持 position:fixed 的问题，有2种布局方法可以替代。

布局一：定义页面整体高度为100%，然后使用 position:absolute 布局可解决

/*<!--absolute布局 [[ --><body><div class="wrap">    <div class="header">header</div>    <div class="main">     弹性滚动区域    </div>    <div class="footer">footer</div></div></body><!--absolute布局 ]] -->*/html,body{
   height:100%;}.wrap{
   width:100%;}.header,.footer{
   height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}.hea