我有以下 struct :
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
我使用javascript动态加载<article>中的内容.正因为如此，百人挡路的高度是可以改变的.
我希望<footer>%的挡路在内容很多的时候放在页面底部，或者在只有几行内容的时候放在浏览器窗口的底部.
目前我可以做其中的一件或另一件...但不能两者兼而有之.
有人知道我如何做到这一点吗-让<footer>粘在页面/内容的底部或屏幕的底部，这取决于哪个更低.
Ryan Fait's sticky footer很不错，但是我觉得它的基本 struct 还不够.
如果您足够幸运，可以使用FlexBox而不需要支持较老的浏览器，那么粘性页脚变得非常简单，and支持动态大小的页脚.
使用flexbox让页脚粘到底的诀窍是让同一容器中的其他元素垂直伸缩.它只需要一个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，我 Select 的基本 struct 是:
<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具有100%的min-height来实现的.您还必须记住，它的父级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 struct 的粘性页脚.只要确保footer的height等于#main-wrapper的padding-bottom，你就应该被设置好.
*我之所以发现fait的 struct 有问题，是因为它在不同的层次上设置了.footer和.header元素，同时添加了不必要的.push元素.