布局（1），头尾固定，中间滑动的布局方式

方法一，先来实现页面头尾固定，中间滑动的效果

1，为页面的body部分设置height:100%,以及overflow:hidden,即禁用页面原生的滚动，保证只会显示一屏的内容。

2，固定区域采用绝对定位。

 

html代码：

<header id="header">大白课堂</header>
<section id="wrap">
    <ul id="list"></ul>
</section>
<footer id="footer">真心希望你能坚持下去，学好前端！</footer>

css清单：

 body{
            margin:0;
        }
        body,html{
            height:100%;
            overflow:hidden;
            position:relative;
        }
        header{
            height:40px;
            font-size:20px;
            color:#fff;
            text-align: center;
            background:#000;
            line-height: 40px;
        }
        footer{
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            height:40px;
            color:#fff;
            text-align:center;
            background: #000;
            line-height: 40px;
        }

        #wrap{
            position:absolute;
            left:0;
            right:0;
            top:40px;
            bottom:40px;
            overflow: auto;
        }

        #list{
            margin:0;
            padding:0;
            list-style: none;
        }

        #list li{
            list-style: none;
            line-height:30px;
            text-indent:20px;
            font-size:16px;
            border-bottom: 1px solid #000;
        }

js清单：

 <script>
        function createList(){
            var list = document.querySelector('#list');
            var inner ="";
            for(var i=0;i<200;i++){
                inner+='<li>这是第'+i+'li</li>';
            }
            list.innerHTML = inner;
        }
        window.onload = function(){
            createList();
        }
    </script> 

移动端实现内滚动的4种方案

再贴几篇相关的博客

将footer固定在页面底部的实现方法

2017年02月13日  ·  1.1k 次阅读

Sticky footers解决方案总结