So fixieren Sie die Fußzeile mit CSS am unteren Rand

So fixieren Sie die Fußzeile unten mit CSS: Stellen Sie zunächst sicher, dass HTML, Text und Container auf der Seite [Höhe: 100 %] entsprechen. Verwenden Sie dann die relative Positionierung [unten: 0], um die Fußzeile unten zu fixieren der Seite.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Prinzipielle Analyse:

(Lernvideo-Sharing: CSS-Video-Tutorial)

Der HTML-Code, der Textkörper und der Container auf der Seite müssen die Höhe von 100 % erfüllen, damit sie den gesamten Bildschirm (Seite) einnehmen kann. und Fußzeile wird verwendet Relative Positionierung unten: 0, der Hauptseitencontainer der Seite muss einen Abstandsboden festlegen, der größer oder gleich der Höhe der Fußzeile ist Die Fußzeile im Seitencontainer, sodass die Fußzeile immer am Ende der Seite fixiert wird.

Implementierung:

HTML

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left Sidebar</div>
        <div id="content">Main content</div>
        <div id="right">Right sidebar</div>
    </div>
    <div id="footer">Footer Section</div>
</div>

Hier ist nur zu beachten, dass der Footer-Container im Container-Container enthalten ist.

CSS

html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*IE6不识别min-height*/
  position: relative;
}
#header {
    background: #ff0;
    padding: 10px;
}
#page {
    width: 960px;
    margin: 0 auto;
    padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;/*脚部的高度*/
    background: #6cf;
    clear:both;
}
/*=======主体内容部分省略=======*/

Aus dem CSS-Code sehen wir, dass die Seitenhauptseite über einen Padding-Bottom-Satz verfügt und dieser mit der Höhe der Fußzeile übereinstimmt. Margin-bottom kann hier nicht anstelle von padding-bottom verwendet werden.

Diese Lösung hat einen Nachteil: Die Fußzeile muss eine feste Höhe haben und auf der Seite muss ein Abstandsrand festgelegt werden, der größer oder gleich dieser Höhe ist. Wenn die Fußzeile keine feste Höhe hat oder angepasst werden muss, ist diese Lösung nicht geeignet.

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo fixieren Sie die Fußzeile mit CSS am unteren Rand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!