Hello! The second day I try to solve the problem with the menu. Can someone tell me how to make it stretch to the full height of the page, not the window? I tried to prohibit scrolling, but then all the menu items do not fit on the mobile, and all this becomes unreadable (

https://jsfiddle.net/spacyfox/2pqn3h6p/3/

function resizeNav() { // Set the nav height to fill the window $("#nav-fullscreen").css({"height": window.innerHeight}); // Set the circle radius to the length of the window diagonal, // this way we're only making the circle as big as it needs to be. var radius = Math.sqrt(Math.pow(window.innerHeight, 2) + Math.pow(window.innerWidth, 2)); var diameter = radius * 2; $("#nav-overlay").width(diameter); $("#nav-overlay").height(diameter); $("#nav-overlay").css({"margin-top": -radius, "margin-right": -radius, "margin-bottom": -radius}); } // Set up click and window resize callbacks, then init the nav. $(document).ready(function() { $("#nav-toggle").click(function() { $("#nav-toggle, #nav-overlay, #nav-fullscreen").toggleClass("open");; }); $(window).resize(resizeNav); resizeNav(); });

    1 answer 1

    Like this?

     var body = document.body, html = document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); $("#nav-fullscreen").css({"height": height}); ...

    https://jsfiddle.net/2pqn3h6p/4/