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

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 没有很好地放置在页眉和页脚之间。

以下捕获显示了该问题：

如果您知道问题的根源是什么，我将不胜感激向您学习！

标签： javascriptcss

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>