html - 根据内容使页脚底部一致

Question

我试图让我的页脚根据内容显示在页面底部。我尝试并应用了很多 css。有很多方法，但我仍然面临一个问题。

footer {
    width: 100%;
    padding: 25px 0 25px;
    background: #1e1e1c;
    position: absolute;
    bottom: 0;
}
body, html {
    font-family: 'sairaregular';
    font-size: 100%;
    margin:0;
    padding:0;
    height:100%;
}

如果我为某些内容页面提供这样的 css，它位于底部，就像这样。

所以它不在页面末尾，它只是在打开页面时位于底部。我该如何解决这个问题。如果有人建议我解决这个问题。提前致谢。

Answer 1

试试这个:

body{
  margin:0;
}

#page-container {
  position: relative;
  min-height: 100vh;
  background-color: grey;
}

#footer {
  color: white;
  background-color: black;
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 100%;
}

#content-wrap {
  padding-bottom: 40px;
}

 <div id="page-container">
    <header>
      A header?
    </header>
    <div id="content-wrap">
      Main area
      <footer id="footer">
        This is a footer
      </footer>
    </div>
  </div>