弹出框里面怎么设置固定头部和底部，有上下滚动，如代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.jie-pop{
position: absolute;
top: 15%;
left: 20%;
bottom: 20%;
width: 60%;
padding: 40px 0 60px 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 2px;
z-index: 1001;
overflow: auto;
}
.jie-pop .jie-pop-close{
cursor: pointer;
}
/*弹窗头部*/
.jie-pop .jie-pop-header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
color: #fff;
background-color: #1E9FFF;
}
.jie-pop .jie-pop-header .left{
float: left;
margin-left: 10px;
}
.jie-pop .jie-pop-header .left .img{
display: inline-block;
margin-right: 5px;
}
.jie-pop .jie-pop-header .right{
float: right;
margin-right: 10px;
}
/*弹窗身体*/
.jie-pop .jie-pop-body{
}
.jie-pop .jie-pop-body .items .item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
</style>
</head>
<body>
<section class="jie-pop">
<div class="jie-pop-header">
<div class="left">
<span class="img"><img src="images/menu.png" width="14" height="14" alt=""/></span>
<span>二年级英语</span>
</div>
<div class="right">
<span class="jie-pop-close"><i class="layui-icon" style="font-size: 20px; color: #fff;">ဆ</i></span>
</div>
</div>
<div class="jie-pop-body">
<!--试题-->
<div class="items">
<div class="item">
<div class="left">
<input type="checkbox"/>
</div>
<div class="right">
<p>2121</p>
<p>2121</p>
<p>2121</p>
<p>2121</p>
<p>2121</p>
</div>
</div>
<div class="item">
<div class="left">
<input type="checkbox"/>
</div>
<div class="right">
<p>2121</p>
<p>2121</p>
<p>2121</p>
<p>2121</p>
<p>2121</p>
</div>
</div>
<div class="item">
<div class="left">
<input type="checkbox"/>
</div>
<div class="right">
<p>2121</p>
<p>2121</p>
<p>2121</p>
<p>2121</p>
<p>2121</p>
</div>
</div>
</div>
<!--分页-->
<div class="pages">
<div class="left">
<input type="checkbox"/>
</div>
<div class="page">
<button>sfds</button>
<button>sfds</button>
<button>sfds</button>
<button>sfds</button>
</div>
<div class="page">
<button>sfds</button>
<button>sfds</button>
<button>sfds</button>
<button>sfds</button>
</div>
<div class="page">
<button>sfds</button>
<button>sfds</button>
<button>sfds</button>
<button>sfds</button>
</div>
</div>
</div>
<div class="jie-pop-footer">
<button class="layui-btn layui-btn-small layui-btn-normal jie-btn-radius">已选题目(10道)</button>
<button class="layui-btn layui-btn-small layui-btn-primary jie-blue jie-btn-radius">返回</button>
</div>
</section>
</body>
</html>
莫回无浏览 887回答 2
2回答
-
慕桂英4014372
这样： .jie-pop-body{ position: absolute; top: 40px; right: 0px; left: 0px; bottom: 30px; overflow: auto; } .jie-pop-footer{ position: absolute; width: 100%; left: 0px; bottom: 0px; height: 30px; line-height: 30px; border-top: 1px solid #d8d8d8; background-color: #f2f5f5; } -
交互式爱情
我猜你是要做“粘性定位/粘性布局”，所以，搜下这俩词试试~
随时随地看视频慕课网APP
PHP