我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。

CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。


当前回答

只需要自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>

其他回答

从IE7开始,你可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

参见caniuse寻求支持。

一个非常简单的跨浏览器工作的方法是:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>

需要警惕的一件事是移动设备,因为它们以一种“不寻常”的方式实现视口的想法:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此,使用位置:固定;(正如我在其他地方看到的推荐)通常不是正确的方法。当然,这取决于你所追求的具体行为。

我所使用的,并且在桌面和移动设备上运行良好的方法是:

<body>
    <div id="footer"></div>
</body>

with

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
 
#footer {
    position: absolute;
    bottom: 0;
}

我的jQuery方法,这一个把页脚放在页面的底部,如果页面内容小于窗口高度,或者只是把页脚放在内容之后,否则:

此外,在其他代码之前将代码保存在自己的附件中,将减少重新定位页脚所需的时间。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

有些解决方案不适合我,但当我决定使用flex选项时,我发现最好的选择是下面的示例。

html, body{ height: 100%; } body{ display: flex; flex-direction: column; } .main-contents{ flex: 1 0 auto; min-height: 100%; margin-bottom: -77px; background-color: #CCC; } .footer{ height: 77px; min-height: 77px; width: 100%; bottom: 0; left: 0; background: #000000; flex-shrink: 0; flex-direction: row; position: relative; } .footer-text{ color: #FFF; } @media screen and (max-width: 767px){ #content{ padding-bottom: 0; } .footer{ position: relative; /*position: absolute;*/ height: 77px; width: 100%; bottom: 0; left: 0; } } <html> <body> <div class="main-contents" > this is the main content </div> </body> <footer class="footer"> <p class="footer-text">This is the sticky footer</p> </footer> </html>