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

Question

我创建了一个sidenav推送。我写了一个javascript函数来计算页眉和页脚之间的剩余高度：

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});
}

然后我在负责打开sidenav的那个内部称呼它：

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

我正在Mac上工作，当窗口完全打开时，sidenav占据了适当的位置，但是当窗口缩小或尝试在另一台计算机上打开它时，div不能很好地放置在页眉和页脚之间。

以下捕获显示了问题：

如果您对问题的根源有所了解，我将不胜感激！

Answer 1

根本不需要javascript，您可以使用纯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>