粘頁腳CSS修復

-1

我想頁腳（與ADRESS和社會圖標）是在頁面的底部，沒有額外的後（所以沒有向下滾動可能）粘頁腳CSS修復

我也希望它在真底部

正是這個頁面Working link

但是當內容不佔據整個頁面高度它是搞亂...... 喜歡這裏的工作完美：At the bottom BUT adding some scrolling at the bottom 我環顧四周，但似乎無法找到完美的解決方案，我需要你的知識

.sticky-footer-wrapper { 
min-height:100%; 
} 

.push { 
overflow:auto; 
padding-bottom:200px; 
} 

footer { 
position:relative; 
margin-top:-200px; 
height:30px; 
clear:both; 
}

HTML標記

<div class="sticky-footer-wrapper"> 


<div class="push"></div> 

</div> 

<footer></footer>

謝謝您的時間！

來源

2014-02-19 francoboy7

Typo？ '' – biziclop

@ francoboy7會爲你定一個固定的頁腳嗎？ –

@ Mr.Coder不，它不會工作。感謝回覆，雖然 – francoboy7

將頁腳設置爲position：fixed;將其底部設置爲0以下是您正在查找的示例。 http://jsfiddle.net/t9Acp/

<footer>THis is a </footer> 


    footer { 
     position: fixed; 
     bottom: 0; 
     height: 50px; 
     width: 100%; 
     background: rgba(51,51,51,.5); 
    } 
    body { 
     height: 400em; 
    }

來源

2014-02-19 23:54:46 Cam

我不想要任何固定的位置，因爲它會重疊在我的內容上，並且有時會被隱藏。 – francoboy7

@ francoboy7因此，將不透明度設置爲低，並且當用戶翱翔時出現並消失在它之上，你甚至可以將它最小化。 – Cam

因爲它看起來像你有一個固定的高度頁腳設置body元素等於頁腳的高度在底部填充，然後頁腳絕對定位到頁面的底部。

body { 
    padding-bottom:50px; 
} 

footer { 
    height:50px; 
    position:absolute; 
    left:0; 
    bottom:0; 
}

你也不需要用類.push空單元，也像你在這之後，你將需要與類粘頁腳，包裝

來源

2014-02-20 00:27:37

嗨謝謝你的回覆，它似乎並沒有工作......謝謝你 – francoboy7

看起來的元素陰性切緣：CSS sticky footer

我以前碰到類似的問題，所有的CSS都需要在那裏。

編輯：你的內容包裝需要有一個負邊距設置爲與頁腳相同的高度。如果您使用填充，則只會將其進一步推下，並導致無論頁面中的內容有多少都會滾動更多。

這也許應該是這個樣子：

.sticky-footer-wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */ 
} 
footer, .push { 
    height:30px; 
}

通過設置包裝上，以填滿屏幕，然後施加負緣相同的高度頁腳，它推動頁腳關閉屏幕，那麼帶來的它回到頁面的底部，並帶有負邊距。請注意頂部和底部填充，您需要將其添加到包裝的負邊距，因爲它會影響整體高度。

來源

2014-02-20 03:09:39 Timmah

好吧其餘的地方在這裏我沒有寫下來，但它在這裏 – francoboy7

最好顯示你的所有代碼，如果人們可以'沒有看到整個畫面，他們無法提供幫助;） – Timmah

粘頁腳CSS修復

回答

相關問題