需求：點選按鈕 頁面左側或右側滑出一個小視窗，頭部，底部固定，中間內容區域可以滑動滾動條檢視資料，這種視窗 我一般的做法是視窗fixed定位，頭部底部也fixed定位或者絕對定位都可以實現，今天看到一種新的實現方式，自己研究了一下，寫了一個demo記錄一下，也不知這樣寫好不好，重新整理了自己的固有想法，所以記錄一下。也勞煩大神評價指教這種寫法的優缺點。

<div class="parent">
       <div class="title">這裡是標題 這裡是標題</div>
       <div class="child">
           <div class="form-box">
               <div class="content">ssss</div>
           </div>
           <div class="buttons">
               <button>底部固定按鈕</button>
           </div>
       </div>
   </div>
 

 .parent{
           position: fixed;
           top:0;
           bottom:0;
           left:0;
           right:0;
           width:400px;
           height:100%;
           background-color: #c9c9d5;
       }
        .child{
            position: absolute;
            top:0;
            width:100%;
            height:100%;
            box-sizing: border-box;
            padding:50px 0;
        }
        .form-box{
            width:100%;
            height: 100%;
            overflow: scroll;
        }
        .content{
            height:1000px;
        }
        .title{
            border:1px solid #fd635e;
            height:50px;
            background-color: #fff;
        }
       .buttons{
           display: flex;
           justify-content:center;
           background-color: #fff;
           height:50px;
           border:1px solid #eee
       }

    </style>
 

主要思想就是  父級div fixed定位，主要內容div.child 絕對定位，box-sizing:border-box;盒模型；top:0;height:100%;padding-top:50px 這個是給title標題留空，在child的外部有一個title(div) 會佔據padding-top部分。   padding-bottom:50px;這個是給底部的按鈕容器留空，child裡內容部分height:100%;，這樣child裡的form-box就佔據了content部分，form-box的overflow為scroll,與form-box平級buttons會自動佔據child的padding-bottom部分。 

以上就實現裡頭部底部固定  中間滑動。歡迎多評多噴。