我有以下结构:
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
我在 <article> 中动态加载内容使用javascript。因此，<article> 的高度 block 可以改变。
我想要 <footer>当有很多内容时 block 位于页面底部，或者当只有几行内容存在时位于浏览器窗口底部。
目前我可以做其中之一……但不能同时做。
那么有人知道我该怎么做吗 - 获取 <footer>坚持到页面/内容的底部或屏幕的底部，具体取决于哪个较低。
最佳答案
Ryan Fait's sticky footer非常好，但是我发现它的基本结构欠缺*。
flex 盒版本
如果您足够幸运，可以使用 flexbox 而无需支持较旧的浏览器，那么粘性页脚就会变得非常容易，并且支持动态大小的页脚。
使用 flexbox 让页脚粘在底部的技巧是让同一容器中的其他元素垂直 flex 。它所需要的只是一个带有 display: flex 的全高包装元素和至少一个 flex 值大于 0 的兄弟元素:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
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: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>如果你不能使用 flexbox，我选择的基本结构是:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
这离:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
让页脚固定的技巧是将页脚锚定到其包含元素的底部填充。这要求页脚的高度是静态的，但我发现页脚通常是静态高度。
HTML:<div id="main-wrapper">
...
<footer>
</footer>
</div>
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>随着页脚锚定到 #main-wrapper，您现在需要 #main-wrapper 至少是页面的高度，除非它的子项更长。这是通过使 #main-wrapper 的 min-height 为 100% 来完成的。您还必须记住，它的父级 html 和 body 也需要与页面一样高。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
} <div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>当然，您应该质疑我的判断，因为此代码会强制页脚从页面底部脱落，即使没有内容也是如此。最后一个技巧是更改 #main-wrapper 使用的盒子模型，以便 100% 的 min-height 包含 100px 内边距。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
} <div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>就这样，一个带有原始 HTML 结构的粘性页脚。只需确保 footer 的 height 等于 #main-wrapper 的 padding-bottom，你应该准备好了。
* 我发现 Fait 结构有问题的原因是因为它在不同的层级上设置了 .footer 和 .header 元素，同时添加了不必要的 .push 元素。
关于css - 页脚或内容底部的页脚，以较低者为准，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12239166/