javascript - 如何在两个 div 之间设置侧边栏，它应该适合基于调整大小的任何浏览器窗口

Question

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

这是我的 JavaScript 代码

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

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

这是我的演示

Click here to see my demo

Answer 1

您可以使用纯 CSS:有几种方法可以确定 CSS 的行为以适应屏幕尺寸。我认为一个好的方法是使用视口(viewport)单位:vw 和 vh，这将使您轻松实现响应式设计......

vw 代表“视口(viewport)宽度”，vh 代表“视口(viewport)高度”。和， 你可以像在这个例子中那样将它与 CSS 一起使用:

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

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

您还可以为像素和其他设置px CSS sizing units代替 % 并使用 vmin 和 vmax 进行最小和最大尺寸调整，或者像本例中那样使用 min-height/width:

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

另一种更现代的方法是使用 flexbox ...