页眉和页脚之间高度的计算

Question

I created a sidenav push. I wrote a javascript function to calculate the remaining height between my header and footer as well:

function resizeWindow(){
  var headerHeight = $("#header-web").height();
  var footerHeight = $("#web-footer").height();
  var windowHeight = $("html").height();
  var remainHeight = windowHeight-headerHeight-footerHeight;
  $("#mySidenav").css({"height":remainHeight});
}

I then call it inside the one which is responsible of opening the sidenav:

function openNav() {
  resizeWindow();
  document.getElementById("mySidenav").style.width = "400px";
  document.getElementById("map").style.marginRight = "250px";
}

I'm working on a mac and when the window is fully open, the sidenav occupies its adequate position, yet when it's reduced or I try to open it on another computer the div is not well placed between the header and footer.

The following capture shows the issue :

If you have an idea about what could be the source of the problem I would be grateful to learn from you!

Answer 1

There's no need for javascript at all, you could handle this with pure css

 html, body { height: 100%; padding: 0; margin: 0; } .wrapper { display:flex; flex-direction:column; overflow:hidden; height: 100vh; } .wrapper > header { background:#f5f5f5; padding:30px; flex: 0 0 auto; } .wrapper > main { position:relative; flex: 1 1 auto; overflow: hidden; display: flex; } .wrapper > main > .scroller { width: 100%; min-height:100%; overflow:auto; padding:30px; } .wrapper > main > aside { position:absolute; top: 0; right: 0; bottom: 0; width: 320px; color:#eee; background:#000; padding:30px; } .wrapper > footer { background:#f5f5f5; padding:30px; flex: 0 0 auto; } 

 <div class="wrapper"> <header> header </header> <main> <div class="scroller"> main content </div> <aside> sidebar </aside> </main> <footer> footer<br>brrrr<br>brrrrrrrrr </footer> </div>