olha, fiz um exemplo aqui do zero, talvez consiga adaptar a sua pagina:
No caso estou a usar position absolute no lugar de fixed, para que o menuWrapper tenha o seu tamanho relativo ao wrapper.
No lugar de usar height: 100%
, estou ancorando a div
no seu pai, usando top: 0px
e bottom: 0px
No caso do menuWrapper, estou usando margin-bottom: auto
para preencher a diferença entre a ancora bottom: 60px
e o max-height: 240px
caso o height
do wrapper seja maior que 360px
aconselho executar o exemplo abaixo com tela cheia e redimensionar a tela para testar.
openMenu = document.getElementById("openMenu");
closeMenu = document.getElementById("closeMenu");
menu = document.getElementById("menu");
openMenu.onclick = function () {
menu.classList.remove("invisivel");
}
closeMenu.onclick = function () {
menu.classList.add("invisivel");
}
#content {
background-color: whitesmoke;
position: absolute;
padding: 0px;
margin: 0px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
min-height: 320px;
overflow: auto;
}
.invisivel {
display: none;
}
#menu {
background-color: gainsboro;
position: absolute;
max-height: 260px;
top: 0px;
right: 0px;
left: 0px;
bottom: 60px;
margin-bottom: auto;
box-shadow: 0px 0px 10px black;
}
#rodape {
background-color: gainsboro;
position: absolute;
height: 40px;
right: 0px;
left: 0px;
bottom: 0px;
box-shadow: 0px 0px 10px black;
}
<div id="content">
<button id="openMenu">Abrir Menu</button>
<div id="menu" class="invisivel">
<button id="closeMenu">Fechar Menu</button>
</div>
<div id="rodape">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula dui in fermentum consectetur. Donec justo elit, sodales eu accumsan et, maximus eu leo. Sed pretium sapien nibh, id convallis ex scelerisque placerat. Duis pretium hendrerit elit vitae euismod. Nunc condimentum aliquet varius. Aliquam ac urna turpis. Nunc vitae elit elementum tellus malesuada feugiat id ac dolor. Etiam ultrices nibh sed placerat sollicitudin. Maecenas hendrerit gravida ex. Curabitur facilisis commodo augue, at luctus mauris egestas a. Quisque quis quam eu lorem tincidunt imperdiet sit amet non diam. Nulla facilisi. Integer et mauris quis eros ultricies ornare. Maecenas sapien nunc, condimentum ut rutrum nec, porttitor vel risus.
</p>
</div>