我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
我使用的一个简单的解决方案，从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>
其他回答
这就是我解决同样问题的方法
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>
我用这个把我的脚贴在底部，它对我有用:
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有自己的边距和填充，所以这就是为什么我必须调整这个值。
这样做
<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>
<!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
}
