我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
<!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
}
其他回答
这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过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>
此代码的源代码
我一直在调查这个问题。我见过不少解决方案，每一个都有问题，通常涉及一些神奇的数字。
因此，我从各种来源的最佳实践中得出了这个解决方案:
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;
}
我做了什么
Html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
不需要使用位置固定和绝对。只需以适当的方式编写html即可。
动态一行使用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>
<!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 */
}
