Seitenleiste Überlappungen auf der Fußzeile - Website in WordPress erstellt

Question

bearbeiten: Hinzufügen einer großen Menge von Leerzeichen (nur ein paar neue Zeilen) löste dieses Problem, obwohl ich das Gefühl ein wenig mittelalterlichen und ich versuche um eine professionellere Lösung zu finden.

http://juniorgoldreport.com/about-us/ - ist das Beispiel, wenn Sie nach unten rechts schauen (Fußzeile/letzte Beiträge).

Ich verstehe, dass es ein position:absolute Problem ist, und deshalb, aber ich kann nicht eine Lösung zu diesem herausfinden. Leute online haben ähnliche Probleme, die ich hatte und ich habe ihre Lösung gefunden und ausprobiert, aber zu keinem Ende, auch nachdem ich mit ihnen herumgespielt habe, konnte ich es lösen. Dies ist die nächste Lösung, die ich finden konnte:

#main { 
overflow: hidden; /* needed to stretch parent container since children are floated */ 
} 

#primary.content-area { 
width: 68%; 
float: left; 
} 

.site-main .sidebar-container { 
position: static; 
float: right; 
width: 30%; 
height: auto; 
} 

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta { 

padding: 0; 
} 

aber dann meine Fußzeile schießt nur WAYY bis zum unteren Rande der Seite (ein gutes 500+ Pixel des leeren Raumes).

Answer 1

Sie können ein Javascript ausführen, um den Abstand von Körper gleich Fußzeilenhöhe hinzuzufügen. Sie können diese Geige überprüfen, um zu sehen, wie es funktioniert Codepen here

HTML:

<div class="content"> 
    <h1>Here content</h1> 
</div> 
<div class="footer"> 
<h4>FOOTER</h4> 
</div> 

CSS:

body,html{ 
    height: 100%; 
    position: relative; 
} 
.content{ 
    min-height: 100%; 
    background: green; 
} 
.footer{ 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    background: red; 
    width: 100%; 
    z-index: 9; 

} 

JS:

// getting footer height 
var footerHeight = jQuery('.footer').height(); 

// add padding for body equals with footerHeight 
jQuery('html,body').css({'padding-bottom': footerHeight + 'px'}) 

Ich hoffe, dass dies hilft Ihnen!