弹出框里面怎么设置固定头部和底部，有上下滚动，如代码

<!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;">&#x1006;</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