页脚不粘到底部[重复]-Java 学习之路

-2

这个问题在这里已有答案：

How do you get the footer to stay at the bottom of a Web page? 23个答案

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

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

如果您看到隐私页面，则页脚未完全位于底部，因为滚动条处于活动状态

我尝试使用底部：0在页脚div上保持身体的最小高度为100％，同时保持页脚的边缘顶部为-60px . 似乎没什么用

1 回答

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

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

回复于 2024-04-20T18:25:14+08:00

页脚不粘到底部[重复]

1 回答

相关问题