幫助頁腳總是到底

我知道這已經在這裏討論了很多次，但沒有我在這裏找到的答案，似乎解決了我的問題。幫助頁腳總是到底

我有這個變量（高度）佈局，並且一直粘在底部。

我已經使用了最小高度：100％;到集裝箱櫃檯，並以某種方式總是處於底部。麻煩的是，它正在下沉到底。

我已經把這裏的例子：

http://jsbin.com/erono3

正如你所看到的，我的頁腳是在底部，但會走的太遠的底部，即使在頁面上的空間要顯示它，它正在創建一個滾動條。

此外，我想主容器被顯示爲內容大（即關閉方塊），但現在，它看起來像容器一直到底部，而我的頁腳覆蓋它。

我在那裏做錯了什麼？

在此先感謝

來源

2010-11-14 Marcos Placona

你見過這個頁面？：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – 2010-11-14 17:34:25

難道這就是你想幹什麼？您希望容器的尺寸儘可能大，但至少佔用整個屏幕（但爲頁腳提供了足夠的空間）。頁腳總是處於最底部。如果內容很小，您仍然希望它位於可見區域的底部？ – Aishwar 2010-11-14 17:35:49

你可以給父容器的相對和底部作爲絕對，並說底部0px：italways保持底部 – kobe 2010-11-14 17:38:08

你應該再看看Ben Lee的鏈接:)。我已經在你的佈局中使用它來達到你想要的效果。在這裏看到：http://jsbin.com/erono3/2

重要的是腳註是容器的一部分。容器的最小高度爲100％。所以它總是佔據整個屏幕。標題是正常的，它裏面都是。

然後你應該有一個內部容器元素（重要），其中您的主要內容駐留。在上面的鏈接中，它的編號爲#body。這將有一個填充底部（給頁腳提供空間）

頁腳絕對定位爲bottom:0px，這意味着它始終位於容器底部（容器必須爲position:relative）。

編輯（在響應評論）

爲了讓您的頁腳橫跨整個頁面，但保持一切的中心，只是這樣做：刪除寬度關#containter的，#container跨越整個頁。在上面的鏈接中爲#body元素提供一個寬度，並使用margin: 0px auto將其居中。你得到你想要的效果。

新鏈接：http://jsbin.com/erono3/5

來源

2010-11-14 18:04:54 Aishwar

這不完全是我需要的......我想讓頁腳橫跨整個屏幕寬度，而且它必須是與包裝分開 – 2010-11-14 18:34:53

@Marcos：查看我編輯的回覆，以獲得您想要的效果。 – Aishwar 2010-11-14 18:43:35

的問題是你有100％的最小高度上的div容器。這意味着該容器將是其父母的高度的100％，該身體標籤具有100％的高度。因此，如果您的視口是600像素，那麼您的身體將會是600像素，那麼您的容器將是600像素的100％，然後它將在容器div之後粘貼頁腳，這就是爲什麼它低於圖像質量。

所以你可以做的一件事就是將你的頁腳完全放在身體內。通過改變你的立場是絕對的，底部：0px。它會浮在底部。

您可能希望將其放入容器中，具體取決於您要使用的風格，並將其置於絕對位置和底部。

來源

2010-11-14 17:39:50 dwp

這並沒有'當我的頁面的內容產生滾動（.e。比視口大）時，t似乎工作 – 2010-11-14 17:44:45

您的問題不是腳註太低，而是通過使身體100％將頁腳推到頁面底部以下。

考慮將容器div中的頁腳div放在margin-top: -5.5em和position: relative之間，它就可以正常工作。

來源

2010-11-14 17:40:39

這裏是this的簡化版本，這是值得一讀的解釋。看看你是否能適應你的身材。

CSS：

html, body, div { 
    margin: 0; 
    border: 0; 
    padding: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
    #wrap { 
    position: relative; 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    background-color: #aaa; 
    }

和HTML：

<div id="wrap"> 
    <div id="content">Stuff goes here.</div> 
    <div id="footer">FOOTER</div> 
</div>

來源

2010-11-14 18:14:00 aptwebapps

是的，上述解決方案是完美的。 – kobe 2010-11-14 18:15:15

幾乎我需要的，但我希望頁腳跨越整個寬度 – 2010-11-14 18:32:38

它應該跨越整個寬度...但我沒有檢查除FF以外的其他瀏覽器。 – aptwebapps 2010-11-15 03:00:07

http://ryanfait.com/sticky-footer/

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 

/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/

來源

2010-11-14 18:26:52 Tom

，這是特別爲使用ASP.NET母版頁的人，而且在一般情況下，如果你的內容也包裹在<form>元素中，您將需要更改

html, body { 
    height: 100%; 
} 

to 

html, body, form { 
    height: 100%; 
}

來源

2013-05-25 00:59:34

幫助頁腳總是到底

回答

相關問題