置頂頁腳工作不正常

-2

我試着去實現粘頁腳我的網站，但由於某種原因，它不想要的工作及其推比它需要。我已經嘗試了許多「粘腳」教程，但總是有些東西不起作用。置頂頁腳工作不正常

html, body { 
    height: 100%; 
} 

#content { 
    min-height: 100%; 
} 

#main { 
    overflow:auto; 
    padding-bottom: 40px; 
} 

#footer { 
    position: relative; 
    margin-top: -40px; /* negative value of footer height */ 
    height: 40px; 
    clear:both; 
}

來源

2013-11-27 Richard Mišenčík

更新，以便重疊的側邊欄：http://jsfiddle.net/Qx5Fz/12/

你的側邊欄上使用position: fixed; height: 100%;遇到的問題。這會導致邊欄成爲窗口的100％，當窗口應該位於窗口的底部時，它總會將頁腳向下推。

我使用粘頁腳從這裏：Sticky footer + textarea height in percentage（來源：http://css-tricks.com/snippets/css/sticky-footer/）

你需要把所有的內容一個DIV包括你的頭內。然後使用這個CSS來讓頁腳工作。這考慮到了垂直邊界，所以你需要將任何內容合併到計算中，或者只是使用填充。

html, body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 
#wrap { 
    height:100%; 
    margin: 0; 
} 
#wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -100px; 
} 
#wrap:after { 
    content: ""; 
    display: block; 
} 
#footer, #wrap:after { 
    /* .push must be the same height as footer */ 
    height: 100px; 
}

我將top: 0添加到側邊欄。

來源

2013-11-27 22:50:28 brouxhaha

但側邊欄應該重疊，我不會這樣做，但它是這樣設計的。 –

我已經更新了答案，仍然有重疊，但沒有推下頁腳。 – brouxhaha

謝謝你，似乎很好，希望我能夠在本地重新創建它。還有一件事，您可以注意到，當您調整窗口大小時，主文本將切換到左側，並在側邊欄下方。我知道它的固定位置是固定的，它應該可以通過改變固定位置來固定嗎？ –

嘗試

#footer { position: fixed; }

，而不是相對

來源

2013-11-27 22:21:35 CRABOLO

我想這只是粘在底部，不固定。如果沒有其他方式，我會使用固定的。 –

試試這個：http://jsfiddle.net/Qx5Fz/8/

#footer { 
    position: fixed; 
    height: 40px; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
}

來源

2013-11-27 22:27:28

我希望它堅持到底部，而不是固定的。如果沒有其他方式，我會使用固定的。 –

置頂頁腳工作不正常

回答

相關問題