Wie ist das Layout der Sticky-Fußzeile?

零下一度
Freigeben: 2017-06-24 14:18:03
Original
1962 Leute haben es durchsucht

Wie ist das Layout der Sticky-Fußzeile?

Die meisten Webseiten, die wir sehen, unterteilen eine Seite in einen Kopfzeilenblock, einen Inhaltsblock und einen Fußzeilenblock. Wenn der Kopfzeilenblock und der Inhaltsblock weniger Inhalt haben, können Fußzeilen am unteren Rand verankert werden anstatt dem Fluss des Dokuments zu folgen. Wenn sich auf der Seite viel Inhalt befindet, kann die Fußzeile automatisch mit dem Fluss des Dokuments erweitert und am unteren Rand der Seite angezeigt werden. Dies ist das Sticky-Fußzeilen-Layout.

Abbildung

  • Wenn weniger Inhalt vorhanden ist, ist der normale Dokumentflusseffekt wie unten dargestellt

Wie ist das Layout der Sticky-Fußzeile?

Beim normalen Dokumentenfluss ist der Fußzeilenteil nicht am unteren Rand des Fensters fixiert. In diesem Fall muss das Stickyfooter-Layout verwendet werden.

  • Der Layouteffekt von Sticky Footer ist wie unten gezeigt

Sticky footer布局.jpg

Dies entspricht unseren Erwartungen Wie Sie sehen können, sind die Anwendungsszenarien des Sticky-Footer-Layouts immer noch sehr vielfältig.

Implementierungsmethode

Negative-Rand-Layout-Methode

HTML-Code:

<div class="wrapper clearfix"><div class="content">  // 这里是页面内容</div>  </div><div class="footer">// 这里是footer的内容</div>
Nach dem Login kopieren

CSS-Code:

.wrapper {min-height: 100%;}.wrapper .content{padding-bottom: 50px; /* footer区块的高度 */}.footer {position: relative;margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */height: 50px;clear: both;}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;}
Nach dem Login kopieren

Hinweis: Das content des padding-bottom-Elements, die Höhe des footer-Elements und der footer-Wert des margin-top-Elements müssen konsistent sein .

Diese negative Randlayoutmethode ist das am besten kompatible Layoutschema. Sie ist perfekt mit allen gängigen Browsern kompatibel und für verschiedene Szenarien geeignet. Voraussetzung für die Verwendung dieser Methode ist jedoch, dass die Höhe des footer Element ist bekannt und die Struktur ist relativ komplex.

Flex-Layout-Methode

HTML-Code:

<div class="wrapper"><div class="content">这里是主要内容</div><div class="footer">这是页脚区块</div>  </div>
Nach dem Login kopieren

CSS-Code:

.wrapper {display: flex;flex-direction: column;min-height: 100vh;}.content {flex: 1;}.footer {flex: 0;}
Nach dem Login kopieren

Diese Layoutmethode hat eine einfache Struktur und weniger Code und ist außerdem eine empfehlenswertere Layoutmethode.

Zusammenfassung

Das Sticky-Footer-Layout ist ein sehr verbreitetes Seitenlayout und es gibt viele Möglichkeiten, es zu implementieren. Die beiden oben genannten Methoden werden am häufigsten verwendet und können grundsätzlich alle Anwendungsszenarien erfüllen.

Das obige ist der detaillierte Inhalt vonWie ist das Layout der Sticky-Fußzeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!