我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
使用Bootstrap的一行解决方案
除了提供的所有CSS和jQuery解决方案， 我已经列出了一个使用Bootstrap的解决方案，在body标签上使用一个类声明:d-flex flex-column justify-content-between
这并不需要提前知道页脚的高度。 这并不需要设置绝对位置。 这适用于在较小屏幕上溢出的动态div。
html, body { height: 100%; } <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body class="d-flex flex-column justify-content-between text-white text-center"> <header class="p-5 bg-dark"> <h1>Header</h1> </header> <main class="p-5 bg-primary"> <h1>Main</h1> </main> <footer class="p-5 bg-warning"> <h1>Footer</h1> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
其他回答
我在我的许多项目中都使用过，从来没有遇到过任何问题:)
供您参考，代码片段
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ background:green; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ } .footer{ background:gold; } <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="wrapper"> Content Area </div> <div class="push"> </div> <div class="footer"> Footer Area </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
对我有用。
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#{容器 身高:100 vh; 保证金:0; 显示:flex; flex-direction:列; ｝ #页脚{ margin-top:汽车; ｝ < div id = "容器" > < div id = "头" >头< / div > 身体< div id = "身体" > < / div > < div id = "脚注" >页脚< / 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>
从IE7开始，你可以简单地使用
#footer {
position:fixed;
bottom:0;
}
参见caniuse寻求支持。
