2

Eu estou a fazer um site, cujo o menu é 'fullpage'. O problema é que caso o menu (página) tenha menos de 670px (min-height: 670px;) gostaria que o menu (#menuWrapper) ficasse com scroll para que se pudesse fazer scroll e ver o 'footer' e as coisas não ficarem em cima umas das outras. E isso não acontece.

Não vou pôr o código visto que não sei onde reside o problema, mas faço aqui o link do site, peço desculpa pelo incómodo.

E assim era como gostaria que ficasse: exemplo a seguir

2 Respostas 2

1

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>

1

Sem ver seu código html, css e js, fica mais dificil ajudar a encontrar a solução.

Mas como você disse que seu problema é em resoluções abaixo de 670px lhe aconselho a usar media queries.

Ex:

    @media screen and (max-width:670px) {
        #menuWrapper { 

        }
    }

Assim você pode fazer um css que somente ira se aplicar quando a largura da tela for menos que 670px e poderá ir testando soluções para resolver seu problema, como por exemplo usar um position absolute no menu.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .