页脚不会一直在我的网站上[重复]答案

【问题标题】：Footer not going all the way down my website [duplicate]页脚不会一直在我的网站上[重复]
【发布时间】：2018-08-13 19:42:47
【问题描述】：

我不能让我的页脚一直沿着网站向下移动。我找过类似的案例，但没有一个答案能解决我的问题。

我试过了：

最小高度：100%；最大高度：100%；

在 head 和 body 标签中都没有成功。

这是我的代码。

HTML

<body class="text-center fill">
    <div class="container ">
        <div class="logo mx-auto">
            <img src="img/veamos_que_pasa_big.png" alt="" width="100%" height="auto">
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <a href="mailto:XXXXXXX">XXXXXX</a>
        </div>
    </footer>

</body>
</html>

CSS

html, body {
  min-height: 100%;
  max-height: 100%;
}

body {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;  
  -webkit-box-pack: center;
  justify-content: center;
  padding-bottom: 0px;
  background-color: #f5f5f5;
  background-image: url("../img/fondo.jpg");
  background-size: cover;
  background-position: center-bottom;
  background-repeat: no-repeat;
}


.fill {
  min-height: 100%;
  max-height: 100%;
}

感谢你们的帮助！

编辑：这就是它现在的样子https://s10.postimg.org/hskxh2gh5/Captura_de_pantalla_2018-03-05_a_la_s_22.54.02.png，因为你可以看到页脚没有一直到底部。

【问题讨论】：

我不明白您的问题，当我运行您的代码时，我看到页脚出现在窗口底部。你希望它在哪里？
您忘记为正文指定display: flex，没有它justify-content: center 和align-items: center 将无法工作。

标签： html css twitter-bootstrap footer

【解决方案1】：

您始终可以使用绝对定位使页脚显示在底部。

.footer {
   position: absolute;
   bottom: 0;
}

html,
body {
  min-height: 100%;
  max-height: 100%;
}

body {
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-bottom: 0px;
  background-color: #f5f5f5;
  background-image: url("../img/fondo.jpg");
  background-size: cover;
  background-position: center-bottom;
  background-repeat: no-repeat;
}

.footer {
  position: absolute;
  bottom: 0;
}

<body class="text-center fill">
  <div class="container ">
    <div class="logo mx-auto">
      <img src="img/veamos_que_pasa_big.png" alt="" width="100%" height="auto">
    </div>
  </div>
  <footer class="footer">
    <div class="container">
      <a href="mailto:XXXXXXX">XXXXXX</a>
    </div>
  </footer>

</body>

不确定您是否想要使用 flexbox 的解决方案。

【讨论】：