我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
需要警惕的一件事是移动设备，因为它们以一种“不寻常”的方式实现视口的想法:
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;
}
其他回答
与其他解决方案相比，不需要添加额外的容器。因此，这个解决方案更优雅一些。在代码示例下面，我将解释为什么这样工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
所以我们要做的第一件事，就是让最大的容器(html) 100%html页面和页面本身一样大。接下来我们设置body height，它可以大于html标签的100%，但它至少应该一样大，因此我们使用min-height 100%。
我们也让物体是相对的。相对意味着您可以相对地从原始位置移动块元素。但我们在这里不用。因为相对还有第二个用途。任何绝对元素要么是根元素(html)的绝对元素，要么是第一个相对父元素/祖父元素的绝对元素。这就是我们想要的，我们想要footer是绝对的，相对于主体，也就是底部。
最后一步是将footer设置为absolute和bottom:0，这将把它移动到第一个相对的父/祖父类(当然是body)的底部。
现在我们还有一个问题要解决，当我们填满整个页面时，内容会放在页脚下面。为什么?好吧，因为页脚不再在“html流”，因为它是绝对的。那么我们如何解决这个问题呢?我们将在body中添加padding-bottom。这确保主体实际上比它的内容更大。
一个非常简单的弹性解决方案，不需要固定的高度或改变元素的位置。
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
浏览器支持
所有主流浏览器，除了IE11及以下版本。
确保使用Autoprefixer适当的前缀。
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } ///////////////////////////////////////////// body, html { margin: 0; padding: 0; } header, main, footer { margin: 0; display: block; } header, footer { min-height: 80px; } header { background-color: #ccc; } main { background-color: #f4f4f4; } footer { background-color: orange; } <div class="container"> <header></header> <main></main> <footer></footer> </div>
这就是我解决同样问题的方法
html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } <div class="demo"> <h1>CSS “Always on the bottom” Footer</h1> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
其实很简单。这个解决方案不需要知道页脚高度。
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
我的jQuery方法，这一个把页脚放在页面的底部，如果页面内容小于窗口高度，或者只是把页脚放在内容之后，否则:
此外，在其他代码之前将代码保存在自己的附件中，将减少重新定位页脚所需的时间。
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
