我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
我一直在调查这个问题。我见过不少解决方案，每一个都有问题，通常涉及一些神奇的数字。
因此，我从各种来源的最佳实践中得出了这个解决方案:
http://jsfiddle.net/vfSM3/248/
我想在这里实现的事情是让主要内容在绿色区域内的页脚和页眉之间滚动。
这是一个简单的CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
其他回答
位置固定，底部，左边和右边设置为0最适合我:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
绝对位置不会粘在底部，但固定位置会。
我使用的一个简单的解决方案，从IE8+工作
在html上给min-height:100%，这样如果内容较少，那么页面仍然采用完整的视图高度，页脚贴在页面底部。当内容增加时，页脚随着内容向下移动，并保持贴在底部。
JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
<!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 {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
js小提琴
诀窍是使用display:table表示整个文档，使用display:table-row(高度为0)表示页脚。
由于页脚是唯一显示为表行的子主体，因此它呈现在页面底部。
我认为你可以将主要内容设置为视口高度，所以如果内容超过，主要内容的高度将定义页脚的位置
* { 保证金:0; 填充:0; 宽度:100%; ｝ 身体{ 显示:flex; flex-direction:列; ｝ 标题{ 高度:50 px; 背景:红色; ｝ 主要{ 背景:蓝色; /*这是最重要的部分 身高:100 vh; ｝ 页脚{ 背景:黑色; 高度:50 px; 底部:0; ｝ <标题> < /头> 主要主要< > < / > <页脚> < /页脚>
