Javascript 随着内容的增长向下推页脚_Javascript_Jquery_Html_Css

Javascript 随着内容的增长向下推页脚

javascript jquery html css

Javascript 随着内容的增长向下推页脚,javascript,jquery,html,css,Javascript,Jquery,Html,Css,对于我需要解决的问题，我有以下两个示例：页脚是相对的，随着textarea的增长而向下推，但有一个页脚下方的空白页脚是绝对的，正好位于页面底部，但不会随着内容（textarea）的增长而向下推页脚和内容的代码为： .content { padding-bottom: 124px; position: relative; } .footer{ width: 100%; height:124px !important; margin: 0px a

对于我需要解决的问题，我有以下两个示例：

页脚是相对的，随着textarea的增长而向下推，但有一个页脚下方的空白

页脚是绝对的，正好位于页面底部，但不会随着内容（textarea）的增长而向下推

页脚和内容的代码为：

.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;
}

问题是，如何使页脚即使在内容未满时也保持在底部，而随着内容的增长，页脚应进一步向下推。

您可以使用

使用HTML

。。。
你的网站内容在这里
页脚内容

唯一的限制是您必须知道页脚的大小

overflow: auto;

对于

内容

，您可以使用

计算

技巧，该技巧不那么简单，但它只适用于IE9及以上版本，而且还需要您知道页脚的大小。我还添加了

值，以便为较旧的浏览器提供一些类似的逻辑。这也将允许内容扩展到它想要的范围

html，正文{
身高：100%；
}
身体{
填充：0；
保证金：0；
}
#内容，#页脚{
宽度：100%；
背景：白烟；
}
#内容{
最小高度：90%；
最小高度：计算（100%-100px）；
}
#页脚{
身高：10%；
高度：计算（100px）；
背景：#000；
}

将页脚放在content div.Rory中，这样当内容区域很小时，页脚就不会在底部。您说过页脚位置是绝对的，但代码显示的是相对的？@Timo是的，我尝试了位置：相对和位置：绝对

...
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>

    </div>
    <div class="footer">
        Content of footer
    </div>
</body>
</html>

overflow: auto;