How to get fixed div to the bottom of other div? - html

Question

I am trying to build a digital restaurant menu… I designed it like a popup, so it sits in a fixed container on top of a gray transparent overlay. Since there are more dishes than fitting into this container, I wanted the container to be scrollable, which I achieved with overflow-y: scroll. At this point
it still worked perfectly.
But on the bottom of the container I wanted fixed footer with a white-to-transparent gradient containing a button to close the whole menu popup. Since the stuff that I thought of didn't work, I placed it inside of another container on top of the popup… Now it looks as I wanted it, but the menu in the background is not scrollable anymore.
I guess there must be another way… How can I place the container with the close button on the bottom of the menu container while still being able to scroll?
Here is a jsFiddle…

Answer 1

Your container for the button at the bottom is overlaying the scrollable container, so when you try and scroll the text, you're actually trying to scroll inside of the bottom-container as its over the top. I have made a JS fiddle, with an example of what you're trying to achieve.
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;
}