移动端布局 + iscroll.js

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
         <title></title>
         <style>
             *{
                 padding: 0;
                 margin: 0;
             }
             li{ list-style: none; }
             a{ text-decoration: none; }
             html, body{
                 width: 100%;
                 height: 100%;
             }

             .header{
                 width: 100%;
                 height: 44px;
                 position: absolute;
                 top: 0;
                 left: 0;
                 background: red;
             }
             .header .title{
                 height: 44px;
                 text-align: center;
                 line-height: 44px;
                 font-size: 20px;
             }
             .header .button{
                 width: 60px;
                 height: 34px;
                 position: absolute;
                 top: 5px;
                 right: 5px;
                 border: 1px solid #fff;
                 border-radius: 5px;
                 text-align: center;
                 line-height: 34px;
                 color: #fff;
             }

             .tabs{
                 width: 100%;
                 height: 49px;
                 position: absolute;
                 left: 0;
                 bottom: 0;
                 display: flex;
                 background: yellow;
             }
             .tabs li{
                 flex: 1;
             }
             .tabs li a{
                 display: block;
                 text-align: center;
                 line-height: 49px;
             }

             .content{
                 position: absolute;
                 left: 0;
                 width: 100%;
                 top: 44px;
                 bottom: 49px;
                 /*overflow: auto;更改*/
                 overflow: hidden;
             }
             .content .banner{
                 width: 100%;
                 height: 200px;
                 background: yellowgreen;
             }
             .content .list li{
                 border-bottom: 1px solid #ddd;
                 line-height: 40px;
             }
         </style>
     </head>
     <body>
         <header class="header">
             <h1 class="title">首页</h1>
             <a class="button" onclick="btnAction()">按钮</a>
         </header>

         <!-- 主体 -->
         <!-- content滚动视图 -->
         <div class="content">
             <!-- wrapper滚动容器 -->
             <div class="wrapper">
                 <div class="banner"></div>
                 <ul class="list">
                     <li onclick="liAction()">列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                     <li>列表--大是的发送到是</li>
                 </ul>
             </div>
         </div>

         <!-- tab切换 49px(逻辑像素) 98px(物理像素) -->
         <nav class="tabs">
             <li><a href="#">首页</a></li>
             <li><a href="#">热门</a></li>
             <li><a href="#">发现</a></li>
             <li><a href="#">设置</a></li>
         </nav>

         <script src="iscroll.js"></script>
         <script>
             //让主体部分的内容滚动，需要满足的条件
             //滚动视图（让谁滚动，就是谁成为滚动视图）
             //滚动视图的容器 （滚动视图的第一个层级的子标签，并且所有需要滚动的内容都在这个标签之内）
             //滚动视图大小固定，overflow：hidden

             //以上条件满足就可以创建滚动视图

             //滚动起来：滚动视图的容器的大小 大于 滚动视图的大小

             //创建滚动视图
             //参数1：选择器，或dom对象
             //参数2：配置参数
             var scroll = new IScroll('.content', {
                 click: true, //iscroll为了性能最优
                 tap: true,
                 mouseWheel: true,
                 startY: -200,
                 scrollbars: true,
                 fadeScrollbars: true
             })

             function liAction(){
                 console.log('click');
                 //点击销毁scroll
                 scroll.destroy();
             }

             function btnAction(){
                 console.log(scroll);
             }

         </script>

     </body>
 </html>