ライアン・フェイトの粘着性のあるフッターはとてもいいですが、基本的な構造が欠けていると思います*。
Flexboxバージョン
幸運なことに、古いブラウザをサポートしなくてもフレックスボックスを使用できる場合は、スティッキーフッターが簡単になり、動的なサイズのフッターをサポートします。
フッターをフレックスボックスで下部に固定するための秘訣は、同じコンテナ内の他の要素を垂直方向に曲げることです。必要なのは、フルハイトのラッパー要素と、次の値より大きいdisplay: flex
兄弟が少なくとも1つあることだけです。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>
フレックスボックスを使用できない場合、私の基本構造は次のとおりです。
<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
これは、hasofを作成することによって行わ#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構造のスティッキーフッターができました。'sが' footer
sheight
と等しいことを確認してください。設定する必要があります。#main-wrapper
padding-bottom
* Faitの構造に誤りがあるのは、不要な要素を追加しながら、要素.footer
と.header
要素を異なる階層レベルに設定するため.push
です。