Fußzeile am Ende der Seite oder des Inhalts, je nachdem, welcher Wert niedriger ist

Ich habe folgende Struktur:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Ich lade dynamisch Inhalte in das <article>mit Javascript. Aus diesem Grund kann sich die Höhe des <article>Blocks ändern.

Ich möchte, dass sich der <footer>Block am Ende der Seite befindet, wenn viel Inhalt vorhanden ist, oder am Ende des Browserfensters, wenn nur wenige Inhaltszeilen vorhanden sind.

Im Moment kann ich das eine oder andere machen ... aber nicht beides.

Weiß also jemand, wie ich das machen kann - lassen Sie den <footer>am unteren Rand der Seite / des Inhalts oder am unteren Rand des Bildschirms bleiben, je nachdem, welcher niedriger ist.

css html footer

— Wille
quelle

Würden die Leute gerne kommentieren, warum sie eine 2 Jahre alte Frage abgelehnt haben?

— Will

Komm schon, es ist fast 6 Jahre her ...

— Will

Antworten:

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: flexund mindestens einem Geschwister mit einem flexWert 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;
}

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

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%;
}

Code-Snippet anzeigen

#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>

Erweitern Sie das Snippet

Wenn die Fußzeile verankert ist, #main-wrappermüssen Sie jetzt #main-wrappermindestens die Höhe der Seite haben, es sei denn, die untergeordneten Elemente sind länger. Dies geschieht, indem man #main-wrapperein min-heightvon hat 100%. Sie müssen sich auch daran erinnern, dass seine Eltern htmlund bodyso 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%;
}

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

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-wrapperso zu ändern , dass das min-heightvon 100%die 100pxPolsterung 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%;
}

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Und da haben Sie es, eine klebrige Fußzeile mit Ihrer ursprünglichen HTML-Struktur. Stellen Sie einfach sicher, dass das footer's heightgleich #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 .footerund .headerauf verschiedenen Hierarchieebenen festgelegt werden, während ein unnötiges .pushElement hinzugefügt wird .}

— zzzzBov
quelle

Ich musste hinzufügen #main-wrapper *:first-child { margin-top: 0; }, sonst wäre die Seite am oberen Rand des ersten Kindes zu lang (was auf kurzen Seiten zu einer unnötigen Bildlaufleiste führt).

— Florian Brucker

Vielen Dank, @zzzzBov für diese gründliche Erklärung und insbesondere für die Erwähnung der Flex-Richtung (ich wünschte, ich hätte dies früher gefunden - hätte mir ein paar Stunden gespart! :)

— ea0723

Die Flexbox-Version funktioniert in IE11 nicht für mich, aber der andere Ansatz ist in Ordnung für mich! Danke und +1!

— Matt

@Matt, Sie müssen Browserpräfixe verwenden, damit Flexbox in IE11 funktioniert. Verwenden Sie ein Tool wie Autoprefixer, und Sie müssen sich nie darum kümmern, sie manuell hinzuzufügen.

— zzzzBov

Der Link zur klebrigen Fußzeile scheint unterbrochen zu sein, da seine Website für ihn in eine In Memoriam-Benachrichtigung umgewandelt wurde. Darüber hinaus gibt es keine zwischengespeicherten Versionen aufgrund der Einstellungen von robots.txt

— tzrlk

Die klebrige Fußzeile von Ryan Fait ist eine einfache Lösung, die ich in der Vergangenheit mehrmals verwendet habe.

Grundlegendes HTML :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Übersetzen Sie dies so, dass es dem ähnelt, was Sie bereits mit etwas in dieser Richtung erzielt haben:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Vergessen Sie nicht, das Negativ am Wrapper-Rand so zu aktualisieren, dass es der Höhe Ihrer Fußzeile entspricht, und drücken Sie div. Viel Glück!

— Josh Mein
quelle

Ich mag die Art und Weise, wie er den Kommentar unten platziert hat, passend für eine Fußzeilenlösung: D

— Geist

Das Markup für diesen bestimmten Stil muss nicht geändert werden.

— zzzzBov

@zzzzBov Ich habe momentan nicht viel Zeit, mich weiter damit zu beschäftigen, aber was genau meinst du?

— Josh Mein

Ich bin an meinem mobilen Geldautomaten und kann daher keine vollständige Antwort schreiben, sonst hätte ich das bereits getan. Der Kommentar war mehr, also würde ich daran denken, später eine Antwort hinzuzufügen.

— zzzzBov

@JoshMein, ich habe eine Antwort hinzugefügt, die erklärt, wie die Fußzeile hängen bleibt, ohne die bereitgestellte Struktur zu beeinträchtigen.

— zzzzBov

Ich wollte dieses Problem lösen, ohne zusätzliche Markups hinzuzufügen, und habe daher die folgende Lösung verwendet:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Erweitern Sie das Snippet

Sie müssen die Höhen von Kopf-, Navigations- und Fußzeile kennen, um die Mindesthöhe für den Artikel einstellen zu können. Wenn der Artikel nur wenige Inhaltszeilen enthält, bleibt die Fußzeile am unteren Rand des Browserfensters hängen, andernfalls wird der gesamte Inhalt unterschritten.

Diese und andere oben veröffentlichte Lösungen finden Sie hier: https://css-tricks.com/couple-takes-sticky-footer/

— Galina E.
quelle