鍍金池/ 問(wèn)答/Java  PHP  Python  C  HTML/ 彈出框里面怎么設(shè)置固定頭部和底部，有上下滾動(dòng)，如代碼

彈出框里面怎么設(shè)置固定頭部和底部，有上下滾動(dòng)，如代碼

clipboard.png

<!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>二年級(jí)英語(yǔ)</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>
        <!--分頁(yè)-->
        <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>
回答
編輯回答
老梗

彈出框定位（fixed），頂部和底部絕對(duì)定位，中間的overflow：scroll

2018年2月20日 04:03
編輯回答
菊外人

我猜你是要做“粘性定位/粘性布局”，所以，搜下這倆詞試試~

2018年6月4日 07:47
編輯回答
玄鳥(niǎo)
這樣：
.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;
}

圖片描述

2017年1月13日 17:50