如何在不适合视口的绝对定位 div 上启用滚动？答案

【问题标题】：How to enable scroll on absolute positioned div that doesn't fit the viewport?如何在不适合视口的绝对定位 div 上启用滚动？
【发布时间】：2016-03-21 18:36:17
【问题描述】：

我有一个绝对定位的 DIV，它有定义的高度和宽度，以及里面的一些内容。问题是，当 div 不适合视口高度时，它会被裁剪掉，如下所示：

NORMAL VIEWPORT

SMALL HEIGHT VIEWPORT

我尝试过使用溢出：在覆盖 div（黑色背景）、div 本身和主体上滚动但没有任何效果（如预期的那样），有没有没有 javascript 的解决方案？

HTML

<div id="overlay">
    <div id="login">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS

#overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.8);
    z-index: 100;
}

#login{
    width: 250px;
    height: 320px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    background: #fff;
}

【问题讨论】：

发布一些代码。试试max-height:100%;
你试过overflow:auto; value 和 max-height 代替 height ?

标签： html css

【解决方案1】：

来自我的评论：

您是否尝试过溢出：自动； value 和 max-height 而不是 height ？

#overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.8);
    z-index: 100;
}

#login{
    width: 250px;
    max-height: 320px;
  overflow:auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    background: #fff;
}

<div id="overlay">
    <div id="login">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

【讨论】：

谢谢！这行得通，现在有个问题，当我这样做时，我希望 div 上方和下方有 50px 的边距（我不希望它使用 100% 的视口高度）

【解决方案2】：

在该 DIV 和黑色背景上使用 overflow: visible，在 body 上使用：overflow: auto。这样，当其中的元素高于窗口高度时，您可以滚动正文。

【讨论】：