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

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>