webentwicklung-frage-antwort-db.com.de

Positionieren Sie die Fußzeile am unteren Seitenrand mit einer festen Kopfzeile

Ich möchte die Fußzeile am unteren Rand der Seite positionieren, die auch eine feste Kopfzeile hat ...

  • Nicht mit position: fixed - Ich möchte nicht, dass es auf dem Bildschirm bleibt, es sollte sich nur am Ende der Seite befinden und sich beim Scrollen normal verhalten.

  • Nicht am unteren Rand des sichtbaren Bildschirms - Am unteren Rand der Seite, d. H. nach allem anderen inhalt.


Hier ist ein Diagramm, um es besser zu erklären:

Footer problem


Hier ist der Code:

  • Ich habe eine Demo vorbereitet: JSFiddle
  • Oder siehe unten
<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>    
</div>
<div id="footer">Footer</div>
body{
    /* Just to enable scrolling in JSFiddle */
    height: 1000px;
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

#content{
    width: 100%;
    position: absolute;
    top: 100px; /*Height of header*/
    z-index: 0;
}

#footer{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
}

/*For demo only*/
#header, #footer{
    border: 3px dashed #333333;
    background: #FFFFFF;
}

#content{
    background: #CCCCCC;
    height: 200px;
}
21
Drahcir

Wie Sie bereits erwähnt haben, würde position: fixed die Fußzeile in Bezug auf das Ansichtsfenster und nicht auf die Seite selbst positionieren. Daher müssen wir das Element im normalen Fluss halten und es irgendwie am unteren Rand der Seite positionieren.

Es gibt einige Ansätze, um dies zu erreichen, die im Laufe der Zeit in der Öffentlichkeit diskutiert wurden .
Zum Beispiel:

Sticky Footer

In dieser Antwort würde ich mit Ryan Faits Methode gehen, da es einfach und leicht zu verstehen ist und auch Ihren Bedürfnissen entspricht (Situationen, in denen Kopf- und Fußzeile feste Höhen haben) .

Betrachtet man die folgende Struktur:

<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>

Die folgenden Schritte sind erforderlich:

  1. Setzen Sie height der Elemente <html> und <body> auf 100%, was für den nächsten Schritt erforderlich ist1.

  2. Das Wichtigste, was wir tun müssen, ist sicherzustellen, dass der #content hoch genug ist, um den #footer auf der Seite nach unten zu verschieben. Daher geben wir dem #content einen min-height von 100%.

  3. Bisher , der #content hat 100% der Höhe des Ansichtsfensters genommen, daher sollten wir die Fußzeile nach oben ziehen, um sie unten auf der Seite zu positionieren. Zu diesem Zweck können wir dem #content einen negativen margin-bottom zuweisen, der dem height des Footers entspricht. Um sicherzustellen, dass die Fußzeile über dem Inhalt angezeigt wird, sollten wir position die Fußzeile relatively. Demo hier.

  4. Wie zu sehen ist, geht ein Teil des Inhalts hinter die Fußzeile, wenn der #content durch seinen Inhalt wächst. Wir könnten dies vermeiden, indem wir entweder ein Spacer-Element am Ende von #content anhängen oder die Kombination von padding-bottom und box-sizing: border-box verwenden2 das soll wird auch auf IE8 unterstützt ​​sein.

4.1 Spacer hinzufügen

Beispiel hier

<div id="content">
    <!-- content goes here -->
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>
.spacer, #footer { height: 100px; }

4.2 Kombination von padding-bottom und box-sizing

Aktualisiertes Beispiel

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

(Beachten Sie, dass die Herstellerpräfixe aus Gründen der Kürze weggelassen wurden)


Header hinzufügen

  1. Wenn der Header im normalen Ablauf verbleiben soll , können Sie ihn einfach wie folgt zum #content hinzufügen:
    (Beispiel hier)

    <div id="content">
        <div id="header">Header</div>
        ...
    
  2. Aber wenn es unbedingt positioniert werden soll 3müssen wir den Inhalt des Elements #content nach unten verschieben, um Überlappungen zu vermeiden .

Daher können wir am Anfang von #content entweder einen Spacer einfügen (Beispiel hier):

<div id="header">Header</div>
<div id="content">
    <div class="header-spacer"></div> 
    <!-- content goes here -->
    <div class="footer-spacer"></div> 
</div>
<div id="footer">Footer</div>

Oder verwenden Sie die Kombination von padding-top und box-sizing wie folgt:

<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>
#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */

    padding-top   : 50px;  /* Equivalent to header's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

Aktualisiertes Beispiel (Beachten Sie, dass die Herstellerpräfixe der Kürze halber weggelassen wurden)

Zu guter Letzt!

Heutzutage unterstützen alle gängigen modernen Webbrowser die Deklaration box-sizing: border-box (einschließlich IE8). Wenn Sie jedoch auf der Suche nach dem traditionellen Weg sind, der eine breitere Browserunterstützung bietet, sollten Sie Abstandselemente verwenden.


1. Dies ist erforderlich, damit min-height: 100% auf dem Element #content funktioniert (da ein Prozentwert relativ zu height des Blockes der Box ist, der durch den <body> festgelegt wird). Außerdem sollte <html> ein explizites height haben, damit height: 100% mit <body> funktioniert.

2. box-sizing: border-box veranlasst UAs, die width/height der Box einschließlich Auffüllung und Rahmen zu berechnen.

3. Gemäß Spezifikation , absolut positionierte Elemente sind Elemente mit einem position von absolute oder fixed.

32
Hashem Qolami

Oder für diejenigen, die diesen Beitrag durch googeln gefunden haben und eine noch kürzere Antwort wünschen, ohne Wrapper (weil Sie sie nicht brauchen):

html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: 3em; }
.footer { height: 3em; position: absolute; bottom: 0; }

fertig ist die Seite jetzt mindestens 100% Bildschirmhöhe, und die Fußzeile befindet sich am unteren Rand der Seite, nicht am unteren Rand des Bildschirms. Wenn die Seite länger ist als der Bildschirm, ist sie immer noch unten und wir haben sie ohne künstliche "Wrapper-Elemente" oder ähnliches gemacht: Das body-Element ist bereits der benötigte Wrapper =).

Der einzige Nachteil ist, dass der Körperrand der Fußzeilenhöhe entsprechen muss, dann aber als negativer Wert, da die "bottom: 0" -Regel die Fußzeile am Anfang am unteren Rand anstelle der Basislinie verankert. Andererseits ist dies als CSS, .less oder .styl, auf triviale Weise gewährleistet.

Sie haben es fast geschafft. Was Sie brauchen, ist ein Container.

Hier ist mein überarbeitetes Bit: JSFiddle Update

Fügen Sie ein Container-Div hinzu:

<div id="container">
    <div id="header"></div>
    <div id="page"></div>
    <div id="footer"></div>
</div>

Dann machen Sie die Position relativ und die Höhe 100%:

#container {
    height: 100%;
    position: relative;
}

Stellen Sie sicher, dass die Position für die Fußzeile absolut ist.

3
Slulego
But if you want the footer to take full size of the screen while #wrapper is 1000px and centered you would do:


<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>

html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#wrapper-inner {
margin: 0 auto;
width: 1000px;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
0
Emma

Ich bin ziemlich neu in der Webentwicklung und ich weiß, dass dies bereits beantwortet wurde, aber dies ist der einfachste Weg, den ich gefunden habe, um es zu lösen, und ich denke, es ist irgendwie anders. Ich wollte etwas Flexibles, weil meine Fußzeile in verschiedenen Bereichen der Web-App unterschiedliche Höhen haben kann. Und am Ende habe ich FlexBox und einen Spacer benutzt.

  1. Legen Sie zunächst die Höhe für HTML und Körper fest
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Ich gehe von einem column-Verhalten für unsere App aus, für den Fall, dass Sie einen Header, einen Helden oder Inhalte hinzufügen müssen, die vertikal ausgerichtet sind. 

  1. Erstellen Sie die Spacerklasse
.spacer {
    flex: 1; 
}
  1. Dein HTML könnte also später etwas ähnliches sein 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Sie können hier mitspielen https://codepen.io/anon/pen/xmGZQL

0
Camo

Um es einfach zu machen:

#header {
    position: fixed;
    width:100%;
    height:100px;
    top:0px;
    z-index:2;
}
#content, #footer {
    position: relative; /* or leave it static as by default */
    z-index:1;
}
body,div {
    margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
    margin-top: 100px; /* the same value as header's height */
}

jsfiddle

0
Stano