Platzieren Sie Wordpress Fußzeile am Ende der Seite

Question

Ich habe ein Dilemma, das schätzt und versucht jeden Vorschlag vorgeschlagen. Ich habe einen localhost, der wordpress unter Verwendung des Themas The Fox läuft. Ich habe alles perfekt außer der Fußzeile.

Ich habe einige Seiten, dass der Inhalt eine Seite nicht erweitert, während andere mehr als eine Seite erweitern und das Problem ist, dass die Fußzeile genau dort beginnt, wo der Text endet und ich nicht weißen Raum wegen der Ansicht hinzufügen möchte Unterschiede in den Häfen. Wie Sie unten sehen können, habe ich einen Screenshot einer Beispielseite mit kleinem Inhalt.

Ich hoffe, dass Sie den zusätzlichen Leerraum nach der Fußzeile bemerkt haben, die auch auf dem Bildschirm, um die Fußzeile der Mitte der Seite zu nehmen ist.

Ich möchte die Fußzeile bis zum Ende der Seite unabhängig von der Länge des Inhalts oder der Größe des Bildschirms erweitern.

Innerhalb der CSS gibt es eine Fußzeile Abschnitt und es ist hier auf Pastebin, aber ich denke, die wichtigste ist wie folgt;

Fußzeile

{ 
bottom:0px; 
right:0; 
left:0; 
overflow:auto; 
padding:0px; 
min-height:70px!important; 
height:auto; 
position: relative; 
z-index: 9000;} 

In der Fußzeile, verwende ich eine einzige Spalte gerade und ich denke, dieser Code, dass Griffe ... auch in Pastebin.

.footer_1_col .widget_wrap 
    { 
width:100%!important; 
float:none!important; 
margin-left:auto!important; 
margin-right:auto!important; 
padding-right:10px!important; 
} 

Und auf der Fußzeile Typ, verwende ich Typ 8, die den Code verwendet;

/************************************************** 

Footer Type 8 

**************************************************/ 
    .footer_type_8 .widget_wrap { 
    margin: 10px 0px 0px 0; 
    } 
    .footer_type_8 .widget { 
    margin:0px 0px 0px 0; 


} 
.footer_type_8 .widget h2 { 
font-size:10px; 
text-transform:uppercase; 
font-weight:900; 
letter-spacing:normal; 
line-height:14px; 
margin-bottom:0px; 
padding-left:0px; 
position: fixed; 
} 
.footer_type_8 .widget_line { 
display:none; 
} 

Bitte, was mache ich falsch und wo muss ich Änderungen vornehmen? Wenn Sie einen anderen Code sehen möchten, lassen Sie es mich wissen und ich werde es auf Pastebin veröffentlichen.

Danke.

Answer 1

Besonderer Dank an @Firasd für seine Kommentare, die dies möglich gemacht haben.

Alles, was ich getan habe, war, mit dem Browser-Inspektor nach dem body-Element zu suchen und dann die Größe für dieses Element neu zu berechnen, indem ich die bereits bekannte statische Höhe der Kopf- und Fußzeile verwende.

Dies wurde der CSS Seite Abschnitt hinzugefügt

html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);} 

Das Thema Bakerly Visual Composer verwendet, und ich hatte nur den obigen Code auf der Seite hinzufügen ich die Änderungen wollen.

Beachten Sie, dass wenn Sie einen Schieberegler haben, müssen Sie das auch in Ihre Berechnung einfügen, außer wenn Ihr Schieberegler in einem Zeilenelement ist.