我有以下页面(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;
}
其他回答
虽然我找到了许多类似的答案，但我能找到的唯一解决方案是，页脚总是在底部，不显示在现有数据之上:
footer {
position: relative;
clear: both;
}
只需要自定义页脚部分
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过CSS Sticky Footer。但还有更多。
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>
此代码的源代码
下面是我的4种不同的方法:
在每个示例中，文本都是可自由编辑的，以说明内容在不同场景中的呈现方式。
1） 弹性框
车身{min-height: 100vh;保证金:0;｝ 标题{最低高度:50 px;背景:浅蓝色;｝ 页脚{最低高度:50 px;背景:番木瓜;｝ /*文章把页眉和页脚之间的空格都填满了*/ 身体{显示:flex;flex-direction:列;｝ 文章{flex: 1;｝ <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>
2)网格
身体{ 最小高度:100 vh; 保证金:0; 显示:网格; Grid-template-rows: auto 1fr auto; ｝ 标题{ 最小高度:50 px; 背景:浅蓝色; ｝ 页脚{ 最小高度:50 px; 背景:番木瓜; ｝ <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>
下面的方法使用了一个“技巧”，在body上放置一个::after伪元素，并将其设置为与footer相同的高度，因此它将占据与footer相同的空间，因此当footer绝对定位在它上面时，它将看起来像footer真的占据了空间，并消除了它的绝对定位的负面影响(例如，越过body的内容)
3)位置:绝对(无动态页脚高度)
body{ min-height:100vh; margin:0; position:relative; } header{ min-height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>
4)表布局
html{高度:100%;｝ Body {min-height:100%;保证金:0;｝ 标题{ 高度:50 px; 背景:浅蓝色; ｝ {条 高度:1%; ｝ 页脚{ 高度:50 px; 背景:番木瓜; ｝ /****技巧:****/ 身体{ 显示:表; 宽度:100%; ｝ Body > footer { 显示:作用是; ｝ <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>
与其他解决方案相比，不需要添加额外的容器。因此，这个解决方案更优雅一些。在代码示例下面，我将解释为什么这样工作。
<!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。这确保主体实际上比它的内容更大。
