Question

我试图弄清楚无论浏览器的高度如何，元素总是始终滚动到最后。我的最终目标是要有一个不显示滚动条的弹出窗口，但是如果内容超过弹出窗口的高度，您仍然可以滚动。最后，我在顶部有一个图像，该图像需要占内容的一半左右（视觉上）。这是我尝试过的：

我建议您通过jsfiddle波纹管进行查看，结果在SO上似乎有所不同，因为我有SASS代码而不是CSS。

.popup-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    height: 100%;
    max-height: 700px;
    z-index: 991;

    .popup-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 992;
    }

    .popup-content-wrapper {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        max-width: 400px;
        overflow: hidden;
        height: 100%;
        max-height: 650px;
        z-index: 991;
        padding-top: 70px;
        background-color: rgba(255, 255, 255, 0.9);

        .popup-content {
            width: calc(100% - 40px);
            height: 100%;
            max-height: 580px;
            overflow: auto;
            padding: 0 40px 20px 20px;
            p {
                color: #000;
            }
        }
    }
}

<div class="popup-wrapper">
    <img class="popup-logo" src="http://www.clker.com/cliparts/A/x/R/m/4/2/black-white-ying-yang-th.png" asp-append-version="true" />
    <div class="popup-content-wrapper">
        <div class="popup-content">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
    </div>
</div>

这是一个jsfiddle：https://jsfiddle.net/ac1nb9qj/

如您在上面的示例中看到的，如果屏幕的长度大于弹出窗口的长度，则没有问题，但是，如果屏幕高度小于弹出窗口的高度，则弹出窗口不会完全滚动到弹出窗口的末尾内容，底部会截断一些内容。

注意：这是使用SASS（SCSS），而不是常规CSS。

编辑：为澄清起见，我已经实现了滚动条不显示的问题，这里唯一的问题是当我在顶部添加填充以放置图片时，滚动不再向下滚动。这就是我要解决的问题。因此，以下建议重复的内容是错误的。

Answer 1

问题出在您的height: 100%;上。这样，您说他的高度是父代高度的100％，因此，如果父代为500px，则高度也将为500px，而无需考虑其旁边其他元素的大小。在这种情况下，您的徽标占用了一些高度空间，因此，如果徽标为100px，并且文本容器为100％父级高度（500px），则您将以一个父容器的大小为500px结束，该子容器包含两个子级，总和为600px。 / p>

您要说的是“这是父项的高度减去徽标高度”，这可以通过calc CSS关键字来实现。

.popup-content-wrapper {
    height: calc(100% - 100px);
}

提琴：https://jsfiddle.net/y8eg65hL/

其他方法是使用flexboxes（我的首选方法）。我建议您了解它们，因为无限的原因，这将使您的HTML设计变得非常容易。在这种情况下，您可以毫不费力地创建一个元素，说出“填满剩余的父母身高，并考虑其余同胞的大小”。 CSS代码将更加简洁，您将了解HTML的未来：P

弹出元素没有一直滚动到底部

1 个答案: