Problem with overflow

Question

I am making a site, whose menu is 'fullpage'. The problem is that if the menu (page) is less than 670px (min-height: 670px;) would like the menu (#menuWrapper) keep scroll so you can scroll and see the footer and things don’t get on top of each other. And that doesn’t happen.

I will not put the code since I do not know where the problem lies, but I do here the link website, I’m sorry for the inconvenience.

And that’s how I’d like it to stay: example to follow

Answer 1

look, I made an example here from scratch, maybe I can adapt your page:

In case I’m using position Absolute instead of Fixed, so the menuWrapper has its size relative to wrapper.

Instead of using height: 100%, I’m anchoring the div on your father, using top: 0px and bottom: 0px

In the case of menuWrapper, I’m using margin-bottom: auto to fill the gap between the anchor bottom: 60px and the max-height: 240px if the height the wrapper is larger than 360px

advised to run the example below with full screen and resize the screen to test.

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>

Answer 2

Without seeing your html code, css and js, it becomes more difficult to help find the solution.

But as you said your problem is in resolutions below 670px I advise you to use media queries.

Ex:

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

        }
    }

So you can make a css that will only apply when the screen width is less than 670px and you can go testing solutions to solve your problem, such as using an Absolute position in the menu.