flex上下固定中间滚动布局

最新推荐文章于 2024-07-11 14:47:36 发布

原创

最新推荐文章于 2024-07-11 14:47:36 发布 · 777 阅读

0 ·

CC 4.0 BY-SA版权

在移动Web开发中，由于不同设备对position:fixed和overflow:auto的支持问题，导致部分机型无法实现滚动区域内容的拖动。本文介绍了针对ios4和android2.2以下设备的两种布局替代方案，以及在子容器高度超出父容器时的弹性滚动解决方案，包括overflow:auto和-webkit-overflow-scrolling:touch，并提供了一个flex布局的示例链接。

传统 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;}.header