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

最新推荐文章于 2024-08-10 17:13:35 发布

程序员少北晨

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量6.6k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_29412671/article/details/58304676

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用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>