Question

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

<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

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

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

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

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

Answer 2

你想要吗？

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

现场演示 - https://jsfiddle.net/gzkjp2jk/1/

当用户调整窗口大小时，表会缩小。页脚会在不重叠的情况下推送内容

2 个答案: