Layout:

<body> <nav> <button> <div class="container"> <ul></ul> </div> </nav> </body>

Styles:

 nav { position: relative; z-index: 4; } body.fix-nav nav { position: fixed; top: 32px; } .container { position: absolute; z-index: -1; top: 0px; right: 0; overflow: auto; background: #000; }

nav is a common navigation block. When scrolling the page comes to it, the fix-nav class is added to the body element via javascript. And, accordingly, the nav fixed at the top of the screen.

button - the menu open / close button

.container - a container for the menu, attached to the nav .

ul - the menu itself

When nav fixed on top of the screen, the menu is there. And when scrolling has not yet reached navigation, the menu is fixed relative to the nav position.

The problem is that I need to implement a vertical scrolling menu. And for this I need to make the element .container equal to the height of the screen minus the position of the nav (so that nothing goes beyond the edges of the screen) - when the nav not fixed.

I tried to use position: fixed for .container , but it turns out crooked. Especially because nav can be both relative and fixed. It would be possible to implement this in JavaScript, but it seems to me that it would be irrational from the point of view of performance.

    1 answer 1

    To resolve your question, use calc () and the unit of measure vh. So, 100vh is a constant that is always equal to the height of the browser window. Suppose that the height of nav is 100px, then the solution will be:

     .container { height: calc(100vh - 100px); }

    PS There is a way another option. If the .container parent occupies the entire height of the screen, then you can stretch our block with the menu along its height, taking into account the space occupied by nav:

     .container { position: absolute; top: 100px; /* Высота блока nav */ bottom: 0; }
    • And why not use vh % instead? - Yuri
    • @Yuri because you need to know the basics: front-end.su/2015/10/07/viewport-units-vs-percent - Vadizar
    • one
      Okay then. +1 I have already set) - Yuri
    • @Yuri though agrees that if the parent occupies the entire height of the screen, then you can use 100%. But here we see a rough example and do not know exactly what height will be on a live project and whether it will even be possible to use the height: 100% parent blocks at all. - Vadizar