Question

我无法让我的页脚在网站上一路走来。我找了类似的案例，但没有一个答案解决了我的问题。

我尝试过：

最小高度：100％; max-heigth：100％;

在头部和身体标签中都没有成功。

这是我的代码。

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，因为你可以看到页脚不会一直向下到底。

Answer 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的解决方案。

页脚不会一直在我的网站上

1 个答案: