如何將頁腳放置在CSS頁面的底部？

我試着爲每個頁面創建一個頁腳。客體是將頁腳居中放置在頁面底部。您可以檢查我的JSFiddle，或直接查看代碼，如下所示。如何將頁腳放置在CSS頁面的底部？

HTML

<div id="page1" class="page"> 
    <div class="footer"> 
    <p>1</p> 
    </div> 
</div>

CSS

div.page { 
    height: 300px; 
    width: 180px; 
    border: 1px solid #000; 
    margin: auto; 
    margin-bottom: 5px; 
    text-align: center; 
} 
div.footer { 
    background-color: #DDD; 
    width: 100%; 
    bottom: 0; /* doesn't work */ 
} 
p { 
    width: 15px; 
    color: white; 
    background-color: red; 
    text-align: center; 
    margin: auto; 
    bottom: 0; 
}

只見約How to position div at the bottom of a page ?類似的問題。然而，當我申請它的主張，底部 + 位置設置，每頁中的頁腳都合併在一起，放置在導航窗口的底部。這裏的相關JSFiddle

有人可以幫忙嗎？非常感謝。

來源

2015-09-25 Mincong Huang

檢查我的回答，希望它幫助。 –

您需要在頁面div上添加'position：relative'和'position：absolute'到頁腳div –

@AlessandroIncarnati沒有必要評論只是說您已經創建了一個答案。提問者會自動得到通知（並且自己向下滾動並找出它並不困難！）。 –

您正在失蹤position：relative;適用於class =「page」。這樣，應用了絕對位置的元素就知道它必須是相對於父元素.page的bottom：0。

div.page { 
    height: 300px; 
    width: 180px; 
    border: 1px solid #000; 
    margin: auto; 
    margin-bottom: 5px; 
    text-align: center; 
    position:relative; 
} 
div.footer { 
    background-color: #DDD; 
    width: 100%; 
    bottom: 0; /* it works now */ 
    position: absolute; 
} 
p { 
    width: 15px; 
    color: white; 
    background-color: red; 
    text-align: center; 
    margin: auto; 
    bottom: 0; 
}

DEMOhttp://jsfiddle.net/9xzb9m48/3/

來源

2015-09-25 11:17:16

謝謝Lars，顯然。我依靠的是代碼中絕對位置的Jsfiddle。 –

感謝您的回答亞歷山德羅，快速，簡單。快樂編碼:) –

不客氣民聰:)快樂編碼！^_^ –

試試這個：

div.page { 
 
    height: 300px; 
 
    width: 180px; 
 
    border: 1px solid #000; 
 
    margin: auto; 
 
    margin-bottom: 5px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
div.footer { 
 
    background-color: #DDD; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
p { 
 
    width: 15px; 
 
    color: white; 
 
    background-color: red; 
 
    text-align: center; 
 
    margin: auto; 
 
    bottom: 0; 
 
}

來源

2015-09-25 11:20:01

感謝烏什瑪，你的回答是對的，但我只能接受一個答案。祝你今天愉快！ :) –

OP爲什麼要「嘗試這個」？一個好的答案將總是解釋做了什麼以及爲什麼這樣做，不僅是爲了OP，而且是爲了將來SO的訪問者。 –

如何將頁腳放置在CSS頁面的底部？

回答

相關問題