我有以下结构：<body> <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div></body>我<article>使用javascript 动态加载内容。因此，<article>块的高度可以改变。我希望<footer>当有很多内容时，块位于页面的底部，或者当只有几行内容时，在浏览器窗口的底部。目前我可以做其中一个......但不是两个。所以有人知道我怎么做 - 让它<footer>坚持到页面/内容的底部或屏幕的底部，取决于哪个更低。
3 回答
杨魅力
TA贡献1811条经验 获得超6个赞
Ryan Fait的粘性页脚非常好，但我发现它的基本结构缺乏*。
Flexbox版本
如果你足够幸运，你可以使用flexbox而不需要支持旧的浏览器，粘性页脚变得非常简单，并支持动态大小的页脚。
使用flexbox将页脚粘到底部的技巧是让同一容器中的其他元素垂直弯曲。所需要的只是一个全高度的包装元素，display: flex并且至少有一个兄弟的flex值大于0：
CSS：
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>
CSS：
#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需要和页面一样高。
CSS：
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，因此认为min-height的100%包括100px填充。
CSS：
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's height等于#main-wrapper's padding-bottom，就应该设置好。
*我指手画脚既成事实的结构的原因是因为它设置.footer，并.header在不同的层次级别的元素，同时增加不必要的.push元素。
- 3 回答
- 0 关注
- 505 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消