保持頁腳底部但不粘？

我的基本佈局很簡單：保持頁腳底部但不粘？

<header></header> 
<main></main> 
<footer></footer>

如果我讓我的頁腳position:fixed它停留在頁面的底部，不過是一個「粘」頁腳和覆蓋內容需要滾動時。

我想保留頁腳底部，但不是fixed。

這甚至可以做純CSS嗎？與您的代碼

Fiddle

來源

2014-04-26 justinw

[類似這樣]（http://stackoverflow.com/questions/12361029/how-can-i-get-a-sticky-footer-on-my-wordpress-theme/12361147#12361147）？ –

有position:absolute;。這是一個CSS屬性，允許您控制任何元素的確切位置。例如：

<style> 
footer { 
position:absolute; 
top:(numberofuntits)px; 
left: (numberofUnits)px; 
} 

</style>

這使得無論頁面發生什麼，它都保持原位，有點像固定更具體。雖然我認爲你真的需要的是position:relative;所以它調整頁腳相對於頁面上的其他元素。要合併的是，我已經加了你可能要考慮加入一些其他有用的款式......（發現這些上www.w3schools.com）我希望這是你所需要的：

<style> 
footer { 
    clear: both; //prevents floating elements from right/left of footer 
    position: relative; //Positions footer relative to other elements on hte page 
    z-index: 1; //z-index positions elements in front or behind eachother, most have a //natual z-index of -1 
    height: -3em; //exactly what it says... 
    margin-top: 40em; //moves footer to bottom of all elements 
} 
</style>

希望這有助於！

來源

2014-04-26 05:54:31 Brendan

最簡單的方法就是在標籤內的移動和刪除的位置：從你的CSS代碼固定。

<header></header> 
<main><footer></footer></main>

，並在你的CSS：

footer { 
    background: grey; 
    bottom: 0; 
    width: 100%; 
    padding: 20px; 
}

來源

2014-04-26 05:40:09 Duniyadnd

你不應該在'main'中放置重複的內容。根據W3C的規定，「文檔的主要內容區域包括該文檔獨有的內容，並排除在一組文檔中重複的內容，例如網站導航鏈接，版權信息，網站徽標和橫幅以及搜索表單（除非文檔或應用程序的主要功能是搜索表單的功能）。「 –

容易，改變這些：

body { 
    position: relative; 
} 
footer { 
    position:absolute; 
    background-color: grey; 
    bottom:0; 
    width: calc(100% - 40px); 
    padding: 20px; 
}

這裏是FIDLLE

來源

2014-04-26 05:49:33 Matheus

我不認爲這是他要求的 – NicuVlad

保持頁腳底部但不粘？

回答

相關問題