Как установить фиксированный div на дно другого div?

Question

Я пытаюсь создать меню цифрового ресторана ... Я разработал его как всплывающее окно, поэтому он сидит в неподвижном контейнере поверх прозрачного прозрачного наложения. Поскольку в этот контейнер больше блюд, чем в этом контейнере, я хотел, чтобы контейнер был прокручиваемым, что я достиг с помощью overflow-y: scroll. В этот момент он все еще работал отлично.

Но в нижней части контейнера мне нужен фиксированный нижний колонтитул с градиентом от белого до прозрачного, содержащим кнопку, чтобы закрыть всплывающее меню всего меню. Поскольку материал, о котором я думал, не работал, я разместил его внутри другого контейнера поверх всплывающего окна ... Теперь он выглядит так, как я хотел, но меню в фоновом режиме больше не прокручивается.

Я предполагаю, что должен быть другой способ ... Как я могу поместить контейнер с кнопкой закрытия в нижней части контейнера меню, все еще имея возможность прокручивать?

Here is a jsFiddle…

Answer 1

Ваш контейнер для кнопки на дне наложения прокручивать контейнера, так что, когда вы пытаетесь прокрутить текст, вы на самом деле пытаетесь прокрутить внутри нижнего контейнера-в качестве своей поверх , Я сделал скрипку JS с примером того, чего вы пытаетесь достичь.

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