固定页脚始终必须保持在底部，并响应窗口大小调整

Question

This link to the image, where I resize the window, footer must stay at the screen and table shrink

以下是Andrei Gheorghiu帮助我的代码的简单示例：

<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

嗨这被称为粘性页脚，你可以尝试下面的代码

<span *ngIf="registrationForm.controls.password.hasError('pattern') && registrationForm.get('password').touched" class="alert alert-danger">Weak password</span>

在这里演示 http://mystrd.at/data/sticky_footer.html

Answer 2

这应该有效，并且不需要 固定的页脚高度 。

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

<main>
  <div class="container">This is main content</div>
</main>
<footer>
  <div class="container">This is footer</div>
</footer>

为了获得97.38%浏览器支持，它需要加前缀：

    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
         -moz-box-orient: vertical;
         -moz-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    main {
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 auto;
         -moz-box-flex: 1;
          -ms-flex: 1 0 auto;
              flex: 1 0 auto;
    }
    .container {
      width: 80%;
      margin: 0 auto;
      padding: 1rem;
    }
    footer {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
         -moz-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      background-color: #eee;
      border-top: 1px solid #ddd;
    }

<main>
  <div class="container">This is main content</div>
</main>
<footer>
  <div class="container">This is footer</div>
</footer>