根据内容一致地制作页脚底部答案

【问题标题】：Make footer bottom consistently based on content根据内容一致地制作页脚底部
【发布时间】：2019-09-16 19:42:44
【问题描述】：

我尝试让页脚根据内容显示在页面底部。我尝试并应用了许多 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，它位于底部，如下所示。

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

【问题讨论】：

codepen.io/takeradi/pen/MyYqKX
philipwalton.github.io/solved-by-flexbox/demos/holy-grail
alligator.io/css/css-grid-holy-grail-layout
我给了 html positive:relative 和 min-height 为 100%。现在它显示在底部。但是在某些页面中，内容将动态获取它的角度，在这种情况下，它会在内容结束之前占据一些位置。而且如果页脚结束，则会出现一些空间我应该如何解决这个问题
如果您想将其固定到底部而不考虑内容，请使用position:fixed

标签： html css angular twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案2】：

获得所需布局的一种方法是使用flex 属性作为父div 并提供height 属性。

HTML 标记 -

<body>
  <div id="page-container">
    <div id="content-wrap">

    </div>
    <footer id="footer">

    </footer>
  </div>
</body>

CSS 属性 -

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

#page-container{
  display:flex;
  flex-direction: column;
  height: 100vh;

}

#footer{
  padding: 20px;
  background: #DDD;
  margin-top:auto;
}

检查这个pen。

在 html 部分，尝试取消注释 p 标记以可视化内容溢出可见页面时的行为。

【讨论】：

是的，我看到了这个答案。在你的例子中它工作正常。但在我的设计中，我仍然面临内容和页脚之间的空白。我正在使用角度
您能否创建一个最小可重现问题here。我们会更容易为您提供帮助