css - with - w3 school tryit




Wie kann eine klebrige Fußzeile mit variabler Höhe in reinem CSS definiert werden? (2)

Alle anderen Lösungen hier sind veraltet und verwenden entweder JavaScript oder table Hacks.

Mit der Einführung des CSS-Flex-Modells wird die Lösung des Problems der klebrigen Fußzeilen mit variabler Höhe sehr, sehr einfach: Während Flexbox vor allem für die horizontale Darstellung von Inhalten bekannt ist, eignet sie sich auch für vertikale Layoutprobleme. Sie müssen lediglich die vertikalen Abschnitte in einen flexiblen Container einwickeln und auswählen, welche Sie erweitern möchten. Sie belegen automatisch den gesamten verfügbaren Platz in ihrem Container.

Beachten Sie, wie einfach das Markup und das CSS sind. Keine Tisch-Hacks oder so.

Das Flex-Modell wird von allen gängigen Browsern sowie angeblich IE11 + unterstützt, obwohl mein IE dieses Snippet noch nicht korrekt wiedergibt.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}
<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

Hier ist zu beachten, dass die Höhe der Fußzeile nicht festgelegt wird, sondern sich je nach Inhalt ändert.

Wenn ich "klebrige Fußzeile" sage, verwende ich sie in der meiner Meinung nach gebräuchlichen Definition von "Fußzeile", die nie höher als der untere Rand des Ansichtsfensters ist. Wenn jedoch genügend Inhalt vorhanden ist, wird sie ausgeblendet, bis der Benutzer einen Bildlauf durchführt weit genug runter, um es zu sehen. “

Beachten Sie auch, dass ich keine älteren Browser unterstützen muss. Wenn CSS display: table & related properties hier hilft, handelt es sich um ein faires Spiel.


Sie können die Fußzeile ganz unten im Ansichtsfenster anbringen, indem Sie Folgendes ausführen:

position: fixed;
bottom: 0;

Dadurch wird es jedoch auch dann angezeigt, wenn Inhalte vorhanden sind.

Um dies zu verhindern, benötigen Sie JavaScript:

(window.onscroll = function() {
    var foot = document.getElementById('footer');
    foot.style.position = "static";
    if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
        foot.style.position = "fixed";
})();

(Der (...)(); Wrapper bewirkt, dass die Onscroll-Funktion beim Laden der Seite einmal aufgerufen wird, da dies ebenfalls benötigt wird.)
(Die obige Funktion ist noch nicht getestet, sollte aber funktionieren. Wenn nicht, lassen Sie es mich wissen und ich erstelle eine aktuelle Testseite.)





css