Question

这应该很容易，但我不知道为什么它不起作用。我点击图片时弹出一个div叠加层，我的目标是让内容位于顶部并让它滚动并在底部有一个关闭按钮。但是，它不滚动，高度不准确，并且关闭按钮未正确定位。这是代码：

CSS：

body {
    margin: 0px;
}
#popup {
    display:none;
    position:relative;     
    left:25px;
    top:45%;         
    width:275px;
    height:200px;
    margin-top:-70px;
    color:#ffffff;
    background:#000000;
    border:10px solid #000;
    border-radius:20px;
    z-index:100000;      
}
#alt {
    position:absolute;
    top:0;
    overflow:auto;
    height:175px;
}
#closebtn {
    position:absolute;
    bottom:0;
    height:25px;
}

使用Javascript：

window.onload = function() {
    document.getElementById("popupalert").onclick = function() {
        var popup = document.getElementById("popup");
        popup.style.display = "block";
    };
    document.getElementById("closebtn").onclick = function() {
        var popup = document.getElementById("popup");
        popup.style.display = "none";      
    }
};

HTML

<img src="https://www.google.com/images/srpr/mlogo2x_3.png" width="100%" id="popupalert">
<div id="popup" align="center">
    <div id="alt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales tempor orci non convallis. Curabitur vestibulum, est ac placerat dictum, leo arcu congue lectus, sed dictum eros dolor vel dui. Sed molestie mollis tortor vitae lacinia. Donec aliquam dolor porta, tristique libero a, malesuada metus. Nullam id venenatis elit. Duis eu mi vel tortor ullamcorper luctus. Nunc ornare maximus justo id consectetur.<br><br></div>
    <div id="closebtn" style="font-size:24pt">✕</div>
</div>

这是fiddle。

Answer 1

只需将overflow: auto用于#popop

CSS DIV覆盖非工作溢出/高度

1 个答案: