页脚不粘在底部

Question

我创建了一个网站，但是我的页脚有问题。当有很多内容时它会停留在页面的底部，但如果页面上的内容非常少，我希望它能完美地保留在屏幕的底部

网站链接：http://www.amideeptech.com/syllogae/index.html

如果您看到隐私页面，则由于滚动条处于活动状态，页脚底部不完美

我尝试在页脚div上使用bottom：0并保持身体的最小高度为100％ 同时保持页脚顶部的边距为-60px。似乎什么都没有用

Answer 1

您正在搜索的内容称为Sticky Footer。基础很简单（参见下面的代码）：你给页脚一个高度并使用这个值将它推到顶部，并带有负边距顶部。然后你获取相同的值并将其添加到内容div的padding-bottom中，以便为页脚提供一些空间，这就是它！

HTML
====
<div id="wrapper">
    <div id="content">
        &nbsp;
    </div>
</div>

<div id="footer">
    &nbsp;
</div>


CSS
===
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
}
#content {
    overflow:auto;
    padding-bottom: 180px; /* value of the footer's height */
}
#footer {
    position: relative;
    margin-top: -180px; /* negative value of the height */
    height: 180px;
    clear:both;
}