html - 如何将固定的div固定到其他div的底部？

Question

我正在尝试构建数字餐厅菜单……我将其设计为弹出窗口，因此它位于灰色透明覆盖层顶部的固定容器中。由于容器中装不下的盘子太多了，我希望容器可以滚动，我使用 overflow-y: scroll 实现了这一点。 此时它仍然运行良好。

但是在容器的底部我想要固定的页脚，它有一个白色到透明的渐变，其中包含一个按钮来关闭整个菜单弹出窗口。由于我想到的东西不起作用，我将它放在弹出窗口顶部的另一个容器内......现在它看起来像我想要的那样，但后台的菜单不再可滚动。

我想一定有另一种方法......我怎样才能将带有关闭按钮的容器放在菜单容器的底部，同时仍然能够滚动？

Here is a jsFiddle…

Answer 1

底部按钮的容器覆盖了可滚动容器，因此当您尝试滚动文本时，您实际上是在尝试在底部容器内部滚动，因为它在顶部。我制作了一个 JS fiddle ，其中包含您要实现的目标的示例。

https://jsfiddle.net/8ydb2h2m/

body {
    background: #ccc;
}

    .box {
        width: 100%;
        height: 100%;
        max-width: 80%;
        max-height: 80%;
        left: 0;
        top: 0;
        margin: 5% 10%;
        position: fixed;
        background: #fff;
        overflow: hidden;
    }

    .top-section {
        height: 20%;
        background: #c00;
    }

    .scroll-section {
        height: 70%;
        overflow-y: scroll;
    }

    .bottom-section {
        height:  10%;
    }

    .button {
        background: #c00;
        height: 30px;
        width: 100px;
        margin: auto;
        text-align: center;
    }