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

我想让页脚

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

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


当前回答

位置固定,底部,左边和右边设置为0最适合我:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

绝对位置不会粘在底部,但固定位置会。

其他回答

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

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

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

虽然我找到了许多类似的答案,但我能找到的唯一解决方案是,页脚总是在底部,不显示在现有数据之上:

footer {
    position: relative;
    clear: both;
}

这样做

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读flex,它被所有现代浏览器所支持

更新:我读过flex并尝试过。这对我很管用。希望你也能这样。以下是我的实现方法。这里main不是ID,而是div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里你可以阅读更多关于flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住,旧版本的IE不支持它。

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

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

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>