基于flex弹性布局头尾固定，中间滚动效果实现

来源：互联网发布：nginx php 张宴编辑：程序博客网时间：2024/05/01 15:28

这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。

这里写图片描述

    <html>    <head>    <meta charset="utf-8">    <title>lvyou</title>    <style>        /*清除手机的一些基本样式*/    html {      font-size:62.5%;    width:100%; height:100%;    -webkit-font-smoothing:antialiased;    }    body {      text-align:center;      -webkit-user-select:none;       width:100%; height:100%;        /*background:#fff;*/       /*默认背景颜色*/      /*font-size:1.2rem;*/    /*默认字体大小*/      /*color: #000;*/      /*默认字体颜色*/      font-family:"Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;        -webkit-text-size-adjust:none;    }    * {     margin:0;       padding:0;      list-style:none;    }    i, em, b {    font-style:normal;      font-weight:normal;    }    :-moz-placeholder {color:#ccc;}    ::-moz-placeholder {color:#ccc;}    ::-webkit-textarea-placeholder {color:#ccc;}    :-ms-textarea-placeholder {color:#ccc;}    img{    width:100%; vertical-align:top;}    input,textarea,select{      -webkit-appearance:none;        font-size:1.2rem;       border:0;       background:transparent;    font-family:"黑体","Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;       outline:none;    }    input,a,span{       -webkit-tap-highlight-color: rgba(0,0,0,0);    }    /*flex最外框*/    .page{    display:-webkit-box;    -webkit-box-orient:vertical;    height:100%;    }    /*flex内容区*/    .page .content{    position:relative;      -webkit-box-flex:1;    -webkit-flex:1;     flex:1;    overflow:auto;    -webkit-overflow-scrolling:touch;       background-color:#ccc;    }    /*flex头部*/    .header{    display: -webkit-box;}    .header *{  display: block;}    /*flex底部，按钮平均分布*/    .footer{    overflow: hidden;   background:#fff;}    .foot-nav{  display:-webkit-box;    height: 2rem;   line-height: 2rem;}    .foot-nav *{    display: block; -webkit-box-flex: 1;    -webkit-flex:1; flex:1;}    </style>  </head>    <body>    <section class="page">          <header class="header">         我是头部        </header>           <section class="content">                   <div>asdasd</div>               </section>              <footer class="footer">             <nav class="foot-nav">                      <b>首页</b>                           <b>其他</b>                           <b>中心</b>                       </nav>              </footer>       </section>    </body>    </html>

我在写项目过程中遇到了这个问题，记录一下。

1 0