页脚不会一直沿着我的网站[重复]

问题描述 投票:1回答:1

我不能让我的页脚一直沿着网站走。我找了类似的案例,但没有一个答案解决了我的问题。

我尝试过:

最小高度:100%;最大高度: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,因为你可以看到页脚不会一直下​​到底部。

html css twitter-bootstrap footer
1个回答
2
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.