页脚不在整个页面的底部

Question

如上图所示，我的页脚获得的负载为100％宽度，但不是页面的最底部，因为我是HTML / CSS的新手，所以我已经花了一个小时了，但是仍然无法解决，表单从页面视图中过度扩展，因此当我向下滚动到底部时，“注册”按钮后的间距也很小...我该如何解决呢？

这是我的代码示例

.center-page {
  width: 400px;
  height: 400px;
  position: absolute;
  top: -40px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.footer-pos {
  width: auto;
  height: auto;
  position: absolute;
  top: 860px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div>
  <div class=navbar>
    NAVBAR CONTENTS
  </div>
  <div class="center-page">
    ALL MY "label" and ASP "input" and Sign Up "button"
  </div>
</div>
<div>
  <footer class="footer-pos">
    <div> &copy; 2018 Copyright: HRCA </div>
  </footer>
</div>

我正在使用bootstrap 4.1.3（bootstrap.min.css），这是我自定义的CSS代码，用于内容（中间页）和页脚

Answer 1

将这两个元素都定位为绝对位置是您的问题所在。您的身体不应完全按照设置的方式进行定位。

Answer 2

CSS：

.footer-pos {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

HTML：

<div class=navbar> 
  NAVBAR CONTENTS 
</div>

<div class="center-page">
  ALL MY "label" and ASP "input" and Sign Up "button"
</div>

<div class="footer-pos">
  &copy; 2018 Copyright: HRCA 
</div>

top在把东西推到中间。

Answer 3

您正在完全定位页脚，并为其指定一个最高值，该最高值将确定页脚从页面开始向下的位置。如果仅删除该值，则底部值（0）将从下至上对其进行定位。

对于注册按钮，请尝试在父元素的底部添加一些填充（我想这是此处的元素），即padding-bottom：50px。

CSS可能很挑剔，但您会掌握它的！

Answer 4

感谢大家的帮助和贡献！

我已经通过参考bootstrap粘性页脚模板解决了这个问题！ https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/

我将HTML正文更改为

<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
    NAVBAR
</div>

<div class="container center-page">
    CONTENT
</div>

<footer class="footer">
    <div class="container">
        &copy; 2018 Copyright: HRCA
    </div>
</footer>

而且还具有最少的自定义CSS样式！

.center-page {
    width: 300px;
    padding-top:50px;
    padding-bottom: 50px;
}

Answer 5

您应该这样做：

.footer-pos {
    position: fixed;/*To make it always be at that point.*/
    top: 100%;/*to make it 100% at the bottom*/
    transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}