如何强制我的页脚粘贴到CSS中任何页面的底部?

oxo*_*oxo 25 html css footer sticky-footer

这是我的代码:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}
Run Code Online (Sandbox Code Playgroud)

我不知道这有什么问题 - 任何人都可以帮忙吗?

编辑:为了更清楚地说明错误:当页面加载时,页脚显示在底部.但是,当网页的高度>大于屏幕上的尺寸以便显示滚动条时,页脚将保持在同一位置.也就是说,当页面的高度<= 100%时,页脚位于底部.但是,当页面高度> 100%时,页脚不在该页面的底部,而是在可见屏幕的底部.

编辑:令人惊讶的是,以下解决方案都没有奏效.我最终实现了侧边栏.

SLa*_*aks 28

你可能正在寻找这个例子:

<div class="wrapper">
    Your content here
    <div class="push"></div>
</div>
<div class="footer">
    Your footer here
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

适用于142像素的页脚

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
Run Code Online (Sandbox Code Playgroud)


小智 7

试试这个:

position: fixed;  
bottom: 0;
Run Code Online (Sandbox Code Playgroud)

  • 这会将页脚放在窗口的底部,但不会放在页面的底部(如果页面高于窗口)... (3认同)