側邊欄重疊在頁腳 - 在wordpress中創建的網站

編輯：添加大量的空白（只是一堆新的線）解決了這個問題，雖然我覺得這是有點中世紀，我試圖找到更專業的解決方案。側邊欄重疊在頁腳 - 在wordpress中創建的網站

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

但當時我只是頁腳拍攝WAYY下降到頁面底部（空空間的好500+像素）。

來源

2016-05-16 Robolisk

也許使用'position：fixed'將頁腳固定到底部，並使用z-index將它移到側欄上方。 – TricksfortheWeb

另外，你有沒有檢查過你的導航下拉菜單是如何反應的？這不是你唯一的問題。 – TricksfortheWeb

@TricksfortheWeb我會看看位置：固定解決方案。我只是擔心這會影響所有其他頁面（這是可以的），當我試圖解決有關頁面的問題。我明白你對導航欄下拉的含義，你指的是它如何重疊？ – Robolisk

你可以做一個JavaScript來添加頁腳高度的身體等於填充。您可以檢查此琴，看看它是如何工作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'})

我希望這可以幫助你！

來源

2016-05-16 20:44:49

我不得不離開我的電腦，但是當我回來時，我會看看這個。它看起來很有趣，謝謝！我會回顧這個潛在解決方案的工作原理。 – Robolisk

如果頁腳具有固定的高度並且不依賴於頁腳中有多少內容，則可以像這樣設置來自CSS的body填充。 .body {padding-bottom：footer_height px} –

側邊欄重疊在頁腳 - 在wordpress中創建的網站

回答

相關問題