Problem with overflow

Question

Problem with overflow

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm making a website, whose menu is fullpage. The problem is that if the menu (page) is less than 670px ( min-height: 670px; ) I would like the menu ( #menuWrapper ) to have scroll so you can scroll and see the 'footer' and things do not stay on top from one another. And that does not happen.

I will not put the code since I do not know where the problem lies, but I do here the link of the site, I apologize for the inconvenience.

And here's how you'd like it: example to follow

css height fullscreen

asked by anonymous 06.08.2015 / 12:40

2 answers

How to login with php and session in ionic? How to display on a JSP page the attributes of an object that was passed in a list

score 1 · Answer 1

Look, I've made an example here from scratch, I might be able to adapt your page:

In case I'm using position absolute instead of fixed, so that the wrapper menu is relative to the wrapper.

Instead of using height: 100% , I am anchoring div in your parent, using top: 0px and bottom: 0px

In the case of the wrapper menu, I'm using% wc to fill the difference between the margin-bottom: auto anchor and the bottom: 60px if the max-height: 240px of the wrapper is greater than height

I recommend running the example below with full screen and resizing 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>

score 1 · Answer 2

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

But as you said your problem is at 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.