Ryan Faits klebrige Fußzeile ist sehr schön, aber ich finde, dass die Grundstruktur fehlt *.
Flexbox-Version
Wenn Sie das Glück haben, Flexbox verwenden zu können, ohne ältere Browser unterstützen zu müssen, werden klebrige Fußzeilen trivial einfach und unterstützen eine dynamisch große Fußzeile.
Der Trick, um Fußzeilen mit Flexbox am Boden festzuhalten, besteht darin, dass andere Elemente im selben Container vertikal gebogen werden. Alles was es braucht ist ein Wrapper-Element voller Höhe mit display: flex
und mindestens einem Geschwister mit einem flex
Wert größer als 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>
Wenn Sie keine Flexbox verwenden können, ist meine Basisstruktur der Wahl:
<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>
Welches ist nicht so weit weg von:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
Der Trick, um die Fußzeile zum Festhalten zu bringen, besteht darin, die Fußzeile an der unteren Polsterung ihres enthaltenen Elements zu verankern. Dies erfordert, dass die Höhe der Fußzeile statisch ist, aber ich habe festgestellt, dass die Fußzeilen normalerweise statisch hoch sind.
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>
Wenn die Fußzeile verankert ist, #main-wrapper
müssen Sie jetzt #main-wrapper
mindestens die Höhe der Seite haben, es sei denn, die untergeordneten Elemente sind länger. Dies geschieht, indem man #main-wrapper
ein min-height
von hat 100%
. Sie müssen sich auch daran erinnern, dass seine Eltern html
und body
so groß wie die Seite sein müssen.
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>
Natürlich sollten Sie mein Urteilsvermögen in Frage stellen, da dieser Code dazu führt, dass die Fußzeile vom unteren Rand der Seite abfällt, selbst wenn kein Inhalt vorhanden ist. Der letzte Trick besteht darin, das von der verwendete Box-Modell #main-wrapper
so zu ändern , dass das min-height
von 100%
die 100px
Polsterung enthält.
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>
Und da haben Sie es, eine klebrige Fußzeile mit Ihrer ursprünglichen HTML-Struktur. Stellen Sie einfach sicher, dass das footer
's height
gleich #main-wrapper
' ist padding-bottom
, und Sie sollten eingestellt sein.
* Der Grund, warum ich Fehler an der Struktur von Fait finde, ist, dass die Elemente .footer
und .header
auf verschiedenen Hierarchieebenen festgelegt werden, während ein unnötiges .push
Element hinzugefügt wird .