526互联

移动端弹性布局

发布时间 2023-10-09 11:36:45作者: songxia777

前言

在PC端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容
而移动web开发中，由于浏览器厂商的系统不同、版本不同，会有部分机型不支持弹性滚动

image

上图如果在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种布局方法可以替代。

方案一：定义页面整体高度(body,html)为100%，然后使用 position:absolute 布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>内容弹性滚动</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  <meta name="keywords" content="关键字"/>
  <meta name="description" content="描述"/>
  <style type="text/css">
    body, html {
      margin: 0;
      height: 100%;  //整体高度100%
    }

    .header, .footer {
      background-color: greenyellow;
      text-align: center;
      line-height: 40px;
      height: 40px;
      position: absolute; //采用position: absolute布局方式
      width: 100%;
    }

    .header {
      top: 0;
    }

    .footer {
      bottom: 0;
    }

    .main {
      position: absolute;
      z-index: 1;
      top: 40px;
      bottom: 40px;
      width: 100%;
      overflow: auto;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="header">页面头部（固定在顶部）</div>
  <div class="main">
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
  </div>
  <div class="footer">页面底部（固定在底部）</div>
</div>
</body>
</html>

image

方案二：定义页面整体高度(body,html)为100%，然后使用 display:flex 布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>内容弹性滚动</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  <meta name="keywords" content="关键字"/>
  <meta name="description" content="描述"/>
  <style type="text/css">
    body, html {
      margin: 0;
      height: 100%; //页面高度设置100%显示
    }

    .wrap {
      display: flex;
      flex-direction: column;  //flex布局
      width: 100%;
      height: 100%;
    }

    .header, .footer {
      background-color: greenyellow;
      text-align: center;
      line-height: 40px;
      height: 40px;
      width: 100%;
    }

    .main {
      flex: 1;
      width: 100%;
      overflow: auto;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="header">页面头部（固定在顶部）</div>
  <div class="main">
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
    <p>高度自动适应</p>
  </div>
  <div class="footer">页面底部（固定在底部）</div>
</div>
</body>
</html>