这个问题在这里已有答案:
我不能让我的页脚一直沿着网站走。我找了类似的案例,但没有一个答案解决了我的问题。
我尝试过:
最小高度: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,因为你可以看到页脚不会一直下到底部。
您始终可以使用绝对定位使页脚显示在底部。
.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的解决方案。