内容增长时向下推动页脚 [英] Push down the footer as content grows
本文介绍了内容增长时向下推动页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要解决这个问题的两个例子：
I have these two illustration for the issue I need to fix:
- 页脚是相对的，并且随着textarea的增长是页脚下方的
空格
- 页脚已被覆盖，位于页面底部，但不会随着内容（textarea）的增加而被压缩
页脚&内容是：
The code for the footer & content is:
.content {
padding-bottom: 124px;
position: relative;
}
.footer{
width: 100%;
height:124px !important;
margin: 0px auto;
padding-top: 20px;
padding-bottom: 40px;
position: relative !important;
bottom: 0px; !important;
left: 0px;
}
问题是如何让页脚停留在底部，即使
The question is how can I make that the footer stays at the bottom even when the content is not full, while as content grows it should be pushed down further.
推荐答案
您可以使用粘性页脚解决方案 http://ryanfait.com/resources/footer-stick-to-页尾/
You could use the sticky footer solution from http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
.margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
$ b
with HTML
...
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
Content of footer
</div>
</body>
</html>
唯一的限制是你必须知道页脚
The only limitation is that you have to know the size of the footer
这篇关于内容增长时向下推动页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
