头部底部固定的另一种实现方式

最新推荐文章于 2022-10-28 09:26:04 发布

原创最新推荐文章于 2022-10-28 09:26:04 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种新的页面布局方式，通过使用fixed定位和绝对定位实现了头部和底部固定的侧滑窗口，中间内容区域可通过滚动条查看。该布局适用于需要显示大量数据的场景。

需求：点击按钮页面左侧或右侧滑出一个小窗口，头部，底部固定，中间内容区域可以滑动滚动条查看数据，这种窗口我一般的做法是窗口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部分。

以上就实现里头部底部固定中间滑动。欢迎多评多喷。