1. 首頁
  2. 問答
  3. 頁腳問題：不能保持下去

頁腳問題：不能保持下去

2011-05-24 61 views
1

我一直在嘗試2個小時讓我的頁腳留在底部。
我一直在嘗試「馬修詹姆斯泰勒」技術，但沒有運氣。頁腳問題：不能保持下去

有人看到我失蹤或做錯了嗎？

這是一個活生生的例子：http://glustik.com/essex/index.html

任何幫助將是巨大的！

我會附加{}的CSS代碼，但它總是爲我打破。

來源

2011-05-24 Varazi

+2

不是一個答案，但只是讓你知道：'id'值應該是唯一的（沒有兩個應該是在一個頁面上相同）。如果您需要重複值，請使用類名稱。 – 2011-05-24 22:21:36

+0

你正在尋找一個「粘腳」（總是在屏幕的底部），或者只是想讓頁腳位於容器的底部？ – 2011-05-24 22:30:42

+0

你一定要解決衛斯理指出的問題。重複的id導致不可預知的行爲和跨瀏覽器問題。 – Sparky 2011-05-24 22:32:09

回答

4

我覺得像CSS來解決這個問題仍然存在問題，我會試圖重寫整個事情：HTML標記和CSS，否則我懷疑那裏下路會更麻煩。

這裏有一些事情，最有可能給你的麻煩：幾個div的

  • 不必要

    • 重複id值（如前所述）
    • 不必要absolute定位
    • 硬編碼高度值使用「clearfix」div
    • 過度使用負邊距來補償其他元素的填充（始終存在問題）
    • 次要但相關：使用像floatRight這樣的類，就像使用內聯樣式一樣糟糕。

    我認爲一般情況下，而不是試圖控制一切的位置和高度 - 只是讓正常的內容流量支配它。當然，你的標記（頁腳）中的最後一個元素應該在底部，沒有所有這些過度思想的限制。

    祝你好運！

    編輯：顯然，我已經減了，無益的，所以我覺得我應該補充的直接回應：快速修復，簡單地獲得底部的頁腳：

    • 刪除高度並從底部填充#mainBody

    （在FF4和IE8中測試）。在頁腳中仍然會有一些填充問題，但可以通過多種方式解決，具體取決於您希望如何處理它。再次祝你的項目好運。

    • 來源

    2011-05-24 22:40:25

    +0

    這個答案是非常有用和正確的，但它並沒有真正回答@ Varazi的問題....沒有downvote，因爲這是很好的信息，但它並不真正提供解決方案，只是很多問題。 – rockerest 2011-05-25 01:08:32

    +1

    @rockerest：問題在於，當我開始想出幾個解決方案時，我意識到他們都是黑客，並且需要對佈局和CSS進行相當重要的重構，以避免將來更多黑客入侵。 CSS中有很多瘋狂的東西，我不想在手術適當的時候提供另一種創可貼。 – 2011-05-25 02:11:43

    2

    您的頁腳絕對位於相對定位的#container。因此，它位於#container的底部。

    嘗試移動它的#container，或從#container的刪除相對定位

    來源

    2011-05-24 22:27:54 Yisroel

    0

    我一直在做這個很長的時間，從來沒有聽說過這種方法。這並不是壞事，但目前我的圈子裏接受的版本來自Ryan Fait（http://ryanfait.com/resources/footer-stick-to-bottom-of-page/）

    如果你在Chrome中加載並禁用位置：相對於容器，它會正確粘合頁腳到頁面的底部。這給我帶來了一個問題，因爲這與本教程所說的相反。無論如何，它都能達到你的目標。

    來源

    2011-05-24 22:28:08 bpeterson76

    +0

    我不知道這是他的意思，我不會這麼看待設計... – 2011-05-24 22:31:07

    -1

    進行以下更改，並在Chrome渲染對我罰款：

    • 刪除bottom:0;從#footer
    • 變化padding-bottom:167px;在#mainBody到所需的位置（我用455px，它看起來相當不錯）

    來源

    2011-05-24 22:32:20 bamana

    1

    因爲主容器（#mainBody）內的所有內容都是浮動的，所以容器唯一確定其高度的方法是通過「height」屬性設置爲100px;。頁腳正確地呈現在主容器的100像素高度之下。

    你有三個選擇：

    1. 您可以正確地清除主容器，使基於使用clearfix它的內容，如this
    2. 或者你可以設置主的高度它的高度是動態容器的東西更大。我將其更改爲700px，頁腳在主體下方呈現以及。
    3. 或者您可以完全刪除height，這可能是長期的最佳解決方案。感謝@Gaby aka G. Petrioli指出了這一點。

    來源

    2011-05-24 22:41:40 rockerest

    +1

    +1，只是刪除'＃mainBody'上的高度，似乎也修復了這個問題。 – 2011-05-24 22:47:06

    +0

    @Gaby +1對你的評論:)這個高度沒有明確的定義。 – rockerest 2011-05-24 22:48:44

    相關問題

     相關問題