内容增长时向下推动页脚 | 内容增长时向下推动页脚

本文介绍了内容增长时向下推动页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要解决这个问题的两个例子：

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.

推荐答案

您可以使用粘性页脚解决方案

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

这篇关于内容增长时向下推动页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！