html - 当用户调整窗口大小时，表格会缩小。页脚插入它的内容而不重叠它

Question

Picture of table

我有一个页脚有表格和容器的页面。我想让它们响应浏览器窗口的大小，并且我不希望在调整大小时页脚与表格重叠。我想让 table 分别缩小。 这是我到目前为止的代码示例。我需要改进它:

<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>

Answer 1

如果我们假设您的页脚高度为 100 像素，您可以将表格包裹在一个 div 中，并为您的 div 设置最大高度:

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

或者您可以将页脚设置为始终位于正文底部的固定元素:

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