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

我创建了一个侧导航推送。我还编写了一个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没有很好地放置在页眉和页脚之间

以下捕获显示了该问题：

---

如果你有一个什么可能是问题的根源的想法，我会很感激向你学习

根本不需要javascript，您可以用纯css来处理这个问题

html，正文{
身高：100%；
填充：0；
保证金：0；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
溢出：隐藏；
高度：100vh；
}
.wrapper>标题{
背景:#f5；
填充：30px；
flex:0自动；
}
.wrapper>main{
位置：相对位置；
flex:1自动；
溢出：隐藏；
显示器：flex；
}
.wrapper>main>.scroller{
宽度：100%；
最小高度：100%；
溢出：自动；
填充：30px；
}
.wrapper>main>aside{
位置：绝对位置；
排名：0；
右：0；
底部：0；
宽度：320px；
颜色：#eee；
背景：#000；
填充：30px；
}
.wrapper>页脚{
背景:#f5；
填充：30px；
flex:0自动；
}

标题
主要内容
边栏
页脚
brrrr
brrrrrr

使用window.on resize事件重新计算新的大小并应用它。您可以使用纯css完成此操作-无需JS谢谢您的回复。我是这样做的：$（window）.on（'resize'，resizeWindow）；但是没有任何变化。你如何定义边栏容器的

top

值？我给出了：top:8.5%