我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
位置固定，底部，左边和右边设置为0最适合我:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
绝对位置不会粘在底部，但固定位置会。
其他回答
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<header class='header'></header>
<div class="body-content">
<!-- all other page content -->
</div>
<footer class="footer"></footer>
</body>
</html>
html,
body{
height:100%;
}
body {
display:flex,
flex-direction: column,
}
.body-content {
flex-grow:1
}
我用这个把我的脚贴在底部，它对我有用:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
这是你在HTML中唯一要做的修改，用“allButFooter”类添加div。我对所有的页面都这么做了，那些很短的页面，我知道页脚不会粘在底部，也有足够长的页面，我已经知道我必须滚动。我这样做了，所以我可以看到它在页面内容是动态的情况下工作得很好。
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
“allButFooter”类有一个min-height值，它取决于视口的高度(100vh意味着视口高度的100%)和页脚的高度，我已经知道是40px。
这就是我所做的，而且对我来说非常有效。我并没有在所有浏览器上都试过，只在Firefox、Chrome和Edge上试过，结果和我想要的一样。页脚贴在底部，不需要更改z-index、位置或任何其他属性。文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或其他任何位置。
使用响应式设计
有件事我想澄清一下。当我在使用Twitter-Bootstrap进行响应式设计时，这个解决方案，具有相同的40px高的页脚，并没有像我预期的那样工作。我必须修改函数中我要减去的值
.allButFooter {
min-height: calc(100vh - 95px);
}
这可能是因为Twitter-Bootstrap有自己的边距和填充，所以这就是为什么我必须调整这个值。
位置固定，底部，左边和右边设置为0最适合我:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
绝对位置不会粘在底部，但固定位置会。
这样做
<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不支持它。
一个非常简单的弹性解决方案，不需要固定的高度或改变元素的位置。
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>
