CSS - Leave a minimum distance (height) between two 'Fixed' elements

Question

Need to leave a minimum distance between two fixed position elements (the top and the footer). The problem occurs when applying zoom-in on the page, the two elements practically meet, and the goal is to make visible the central content of the page.

Fixed menu CSS code (top):

div#menu {
    position:fixed;
    z-index:1;
    top:0;
    width:100%;
    height:53px;
    white-space:nowrap;
}

Fixed footer CSS code:

table#rodape {
    position:fixed;
    z-index:1;
    bottom:0px;
    width:100%;
    height:70px;
    padding-top:5px;
    padding-bottom:5px;
    overflow:hidden;
}

Is there any way to do it in CSS? What solution can be applied and whether I will have to resort to using jQuery.

Answer 1

I believe that there are several ways to solve this problem, I performed some test here with your code. Testing and using media queries helped solve the problem.

The point is that you need to find the breakpoint of the unwanted behavior, configure it in the media query so that the Layout adapts during the Zoom-in.

   @media screen and (max-width: /*seu breakpoint*/){
        div#menu {
            /*sua adaptação*/
        }
    }

I hope I helped. A Hug