页脚不在整个页面的底部

时间:2018-11-07 13:32:12

标签: html css

enter image description here

如上图所示,我的页脚获得的负载为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代码,用于内容(中间页)和页脚

5 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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在把东西推到中间。

答案 2 :(得分:0)

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

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

CSS可能很挑剔,但您会掌握它的!

答案 3 :(得分:0)

感谢大家的帮助和贡献!

我已经通过参考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;
}

答案 4 :(得分:0)

您应该这样做:

.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*/
}