eine CSS Fußzeile zu machen entweder am unteren Rand des Browserfensters oder unten Inhalt sitzen

Question

Duplizieren von this question.

Ich habe eine bestehende Website (jacquelinewhite.co.uk), darauf gibt es eine Fußzeile. Derzeit befindet sich diese Fußzeile immer unter dem Hauptinhalt. Ich versuche, es an den unteren Rand des Browserfensters zu verschieben, oder wenn der Inhalt größer als das Fenster ist, bleibe am unteren Rand des Inhalts.

effektiv die HTML ist wie folgt strukturiert:

<div id="container"> 
    <div id="top_bar"> 
    </div> 
<div id="header"> 
</div> 
<div id="left_menu"> 
</div> 
<div id="right_content"> 
</div> 
<div class="clear"> 
</div> 
<!-- FOOTER AREA --> 
<div id="footer"> 
</div> 
<!-- END FOOTER AREA --> 
</div> 

ich absolute Position versucht haben, unten 0, was bringt die Fußzeile am unteren Rand des Fensters, aber wenn der Inhalt des Fensters größer ist dann die Fußzeile deckt den Inhalt ab.

Wie soll ich das beheben?

Answer 1

Dieses ist immer gut für mich gearbeitet: CSS Sticky Footer

Answer 2

-Test Dieser Antrieb ...

body { 
    margin:0; 
    padding:0; 
    z-index:0; 
    } 

    #toolbar { 
    background:#ddd; 
    border-top:solid 1px #666; 
    bottom:0; 
    height:15px; 
    padding:5px; 
    position:fixed; 
    width:100%; 
    z-index:1000; 
    } 

Answer 3

Angenommen, Sie Footer() Element verwenden fand ich diese nur CSS Zugabe für mich gearbeitet

html, body { 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

footer { 
    margin-top: auto; 
}