Javascript 如何在两个div之间设置边栏，它应该适合任何基于resize的浏览器窗口

我有两个网格，一个div是页眉，另一个是两个网格之间的页脚，我在左侧使用边栏

这是我的JavaScript代码

function resize()
{
    var heights = window.innerHeight;
    document.getElementById("left").style.height = heights + "px";
}
resize();
window.onresize = function() {
    resize();
};

我想在页面中显示此完整内容，但不显示任何浏览器滚动条

这是我的演示

---

使用Jquery:

您可以选择浏览器屏幕的高度

$(window).height()

&然后降低页眉和页脚的高度

$(window).height() - $('header').outerHeight() - $('footer').outerHeight()

使用JS

window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;

你也可以使用clientHeight，而不是offsetHeight。不同之处在于：

clientHeight

包括填充

offsetHeight

包括填充、滚动条和边框

已更新

将

函数resize（）更新为：

document.getElementById('inner').style.maxHeight = window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;

您可以使用纯CSS：有几种方法可以确定CSS的行为以调整屏幕大小。我认为一个很好的方法是使用视口单位：
vw
和
vh
，这将让您轻松实现响应性设计

vw代表“视口宽度”vh代表“视口高度”。以及，
您可以将其与CSS一起使用，如本例所示：

div {
width: 100vw;
height: 100vh;
}

可能有助于更好地理解此方法

您还可以为像素和其他设置px，而不是%，还可以使用vmin和vmax进行最小和最大大小调整，或者只使用最小高度/宽度，如本例所示：

.sidebar {
min-width: 30%;
min-height: 30%;
}

另一个更现代的方法是用
 @Vinoth更新了答案，如果我在侧边栏中添加更多选项，它将下降。我的要求是，如果侧栏超过屏幕大小，它应该显示垂直滚动（溢出-y），您的页脚内的元素有边距。将上下边距设置为0。首先，您需要使用提供的JS答案修改“function resize（）”，以获取“内部”分区的高度。其次，您应该始终使用，以避免浏览器默认样式。这就是我在问如何获取使用function resize的内部分区高度为什么要使用snippet not working。。。。。你能检查一下我的代码是JSFIDLE吗