Html 当用户调整窗口大小时，表将缩小。页脚推动它'；它的内容没有重叠

我有一个页脚有表格和容器的页面。我想让它们响应浏览器窗口的大小，我不想在调整表的大小时页脚与表重叠。我想把桌子分别缩小。 下面是我到目前为止所拥有的代码示例。我需要改进它：

<main>
<div class="container">
<table class="table table-striped">
      ...content of the table here...
 </table>
</div>
</main>
<footer>
<div class="container">This is footer</div>
</footer>

<style>
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 }
main {
   flex: 1 0 auto;
}
.container {
    width: 80%;
   margin: 0 auto;
   padding: 1rem;
  }
  footer {
    flex: 0 0 auto;
    background-color: #eee;
    border-top: 1px solid #ddd;
    background:orange;
    }
</style>

…此处表格的内容。。。
这是页脚
身体{
保证金：0；
填充：0；
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
主要{
弹性：10自动；
}
.集装箱{
宽度：80%；
保证金：0自动；
填充：1rem；
}
页脚{
flex:0自动；
背景色：#eee；
边框顶部：1px实心#ddd；
背景：橙色；
}

如果我们假设您的页脚高度为100px，您可以将表格包装在div中，并为div设置最大高度：

#divTableWrapper{
  max-height:calc(100vh - 100px);
  overflow-y: auto;
}   

也可以将页脚设置为始终位于正文底部的固定元素：

footer{
  position: fixed;
  width: 100vw;
  bottom: 0;
  }

你想要吗

<main>
<div class="container">
<div class="table table-striped">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
 </div>
</div>
</main>
<footer>
<div class="container">This is footer</div>
</footer>

1.
2.
3.
1.
2.
3.
1.
2.
3.
这是页脚

---

现场演示-

感谢快速响应，但它并没有解决问题。表格仍然没有缩小，并且尽管窗口大小不同，但仍然保持不变。您为表格设置了最大高度，但它没有更改吗？您是否回答了calc（100vh-100px）的确切语法；？是的，它没有改变。桌子的尺寸保持不变，这就是我想要达到的！非常感谢，不用担心！我很感激你花时间帮助我，而且你帮得这么快：）谢谢。这看起来更接近我的意图，但页脚仍然与表重叠。这可能是我的错，我不太清楚我在这里要实现什么：根据我最初的设计，无论窗口大小，用户总是可以看到页脚。并且表的大小是由页脚压缩的。@Trex87您能举个例子吗？我不明白，我不知道如何在评论中添加图片，我会展示给你看。但问题解决了。Farzin有一个很好的例子来说明如何解决这个问题：表格缩小，页脚一直在底部。