Question

我正在尝试建立一个数字餐厅菜单...我把它设计成一个弹出窗口，所以它位于一个灰色透明覆盖层顶部的固定容器中。由于有更多的菜肴而不是装入这个容器，我希望容器可滚动，这是我用overflow-y: scroll实现的。此时它仍然完美无缺。

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

我想还有另外一种方法......如何在能够滚动的同时将容器放在菜单容器底部的关闭按钮上？

Answer 1

底部按钮的容器覆盖了可滚动容器，因此当您尝试滚动文本时，您实际上尝试在底部容器内滚动，因为它位于顶部。我做了一个JS小提琴，举例说明了你想要实现的目标。

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;
    }

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

1 个答案: