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