サイドバーがフッタに重なっています - ワードプレスで作成されたウェブサイト

Question

編集：これはちょっと感じていますが、白いスペース（新しいラインの束）を大量に追加すると、中世のと私は試していますより専門的なソリューションを見つけることができます。

http://juniorgoldreport.com/about-us/ - 右下（フッタ/最近の投稿）を見下ろした場合の例です。

私はそれがposition:absoluteの問題であることを理解しています。そのためですが、私はこれに対する解決策を見つけられません。オンラインの人々には私と同じような問題があり、解決策を見つけて試してみましたが、それを周りに遊んだ後でさえ解決できました。これは私が見つけることができる最も近いソリューションです：

#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; 
} 

が、その後、私のフッターがちょうどページの一番下（空きスペースの良い500以上のピクセル）までWAYYを撮影します。

Answer 1

ボディーの等号の埋め込みにフッターの高さを追加するには、JavaScriptを使用できます。

<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'}) 

私は、これはあなたを助けることを願ってい あなたはそれがCodepen here

HTMLをどのように動作するかを確認するには、このバイオリンを確認することができます！