如果内容很少，如何将页脚总是粘到页面的底部？ [英] How to stick footer always to the bottom of the page if the content is very less?
本文介绍了如果内容很少，如何将页脚总是粘到页面的底部？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
即使在我调整页面大小时，页脚仍应保留在底部。
The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page.
我的HTML代码是
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
<footer class="footer">
</footer>
</div>
</body>
这个CSS是
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
min-height:100%;
position: relative;
}
.formContainer{
width:30%;
height: 100px;
background-color:#fff;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
position:absolute;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
推荐答案
of the div
You should move footer tag out of the div
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">
</footer>
DEMO
添加 height：100％ 到html和body，那么只有你的容器需要100％的高度，并保留你的html代码。
Add height:100% to html and body, then only your container takes height 100% and leave your html code as it is.
html, body{
height:100%
}
strong> DEMO 2
DEMO 2
PS - 我认为你的CSS中的 .body 是一个错误，它应该只是 body
P S - I think .body in your CSS is a mistake, it should be only body
这篇关于如果内容很少，如何将页脚总是粘到页面的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
