我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
<body>
<section class="wrapper">
<!--Some Content-->
</div>
<section class="footer"></section>
</body>
.wrapper {
min-height: 100vh;
}
.footer {
top: 100vh;
}
其他回答
位置固定，底部，左边和右边设置为0最适合我:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
绝对位置不会粘在底部，但固定位置会。
下面是我的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 >页脚> < /页脚 < /身体>
我的jQuery方法，这一个把页脚放在页面的底部，如果页面内容小于窗口高度，或者只是把页脚放在内容之后，否则:
此外，在其他代码之前将代码保存在自己的附件中，将减少重新定位页脚所需的时间。
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
一个非常简单的跨浏览器工作的方法是:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>
动态一行使用jQuery
我遇到的所有CSS方法都太死板了。此外，如果页脚不是设计的一部分，那么将它设置为fixed也是不可取的。
测试:
铬:60 FF: 54 即:11
假设如下布局:
<html>
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
使用下面的jQuery函数:
$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
它所做的是将#content的min-height设置为窗口高度-页脚的高度，无论当时可能是什么。
由于我们使用min-height，如果#content height超过窗口高度，该函数将优雅地降级，并且不会产生任何影响，因为不需要它。
看看它的实际应用:
$("#fix").click(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }); * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="content"> <p>Very short content</p> <button id="fix">Fix it!</button> </div> <div id="footer">Mr. Footer</div> </body> </html>
JsFiddle上的相同片段
奖金:
我们可以更进一步，让这个函数适应动态的查看器高度调整，如下所示:
$(window).resize(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }).resize(); * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="content"> <p>Very short content</p> </div> <div id="footer">Mr. Footer</div> </body> </html>
