Javascript 如何调整HTML页面中单个元素的大小，使其余元素适合窗口而不滚动？

我的页面上有几个组件，其中一个可能是很长的项目列表。我希望为table元素添加滚动条，页面本身不应该有垂直滚动条，除非其他组件指定。页眉和页脚应始终固定在页眉/页脚上（在本例中，应已通过在

正文上使用
height%
完成此操作）


我的问题与非常类似。主要的区别是我的“结果表”可以很长（很高），我希望它可以根据需要滚动-它应该尽可能高，但页面不应该有滚动条，只有结果表

目前，我在我希望最终缩小的元素上使用
50vh
属性，这可以防止它变得太大，但这远远不够灵活或响应性


。整个{
高度：100vh；
显示器：flex；
弯曲方向：柱
}
.标题{
弹性：0；
宽度：100%；
背景色：#ccc
}
.导航{
弹性：1；
高度：50vh；
溢出：自动
}
.文章{
弹性：0；
宽度：100%；
高度：100px；
边框：实心；
边框宽度：1px
}
.页脚{
弹性：0；
宽度：100%；
背景色：#caa
}

标题

桌子
的
内容

应该缩小
必要时

根据需要使用垂直滚动条











页脚
只需将CSS网格与溢出-y:auto一起使用；

：

正文{
保证金：0；
}
.全部{
高度：100vh；
显示：网格；
网格模板行：自动最小最大值（0，1fr）自动；
网格模板区域：“页眉”“主”“页脚”；
}
梅因先生{
显示：网格；
网格模板行：最小最大值（0，1fr）100px；
网格模板区域：“导航”“文章”；
}
.标题{
背景色：#ccc；
网格区域：标题；
}
.导航{
网格区域：导航；
溢出y：自动；
}
.文章{
网格区域：文章；
高度：100px；
边框样式：实心；
边框宽度：1px；
}
.页脚{
网格区域：页脚；
背景色：#caa；
}

标题

桌子
的
内容

应该缩小
必要时

根据需要使用垂直滚动条











页脚

您可以将

overflow-y:hidden

应用于整个和正文。@AneesIjaz我认为这会隐藏滚动条，但内容仍会在屏幕外（页脚很可能不可见）。CSS网格与flex布局有什么关系？它可以与flex一起使用吗？或者它是用来代替flex的东西吗？它比flex更新，与flex相比，它能够基于列和行创建布局。您可以使用其中之一。