頁腳底部 - 100％的高度

我在這個網站的工作 - http://agencymaiclientpages.com/phononic/cms/頁腳底部 - 100％的高度

其中一項要求是，頁腳轉到頁的底部。我知道有高度：body和html需要100％的值，但我試過的組合（內容區域有幾個元素） - 它不起作用。我試圖把所有的主要內容放入100％，沒有任何東西，嘗試了幾個元素，仍然沒有。我究竟做錯了什麼？或者，也許我錯過了什麼？

我甚至試圖刪除一些元素（#primary），所以堆疊不是很「高」，但是頁腳要麼低於屏幕（因此需要滾動），要麼停留在主要內容區域的下方。

來源

2015-02-07 Bruno Kos

顯示你正在試圖做 – 2015-02-07 12:40:33

用'位置嘗試什麼：固定;'？ – 2015-02-07 12:58:26

我已經嘗試了固定位置，但是頁腳與小高度設備上的主要內容區域重疊。所以我認爲託尼巴恩斯給出了最準確的答案，我認爲這是我將使用的解決方案。 – 2015-02-07 13:42:02

您需要固定位置。這將確保您的頁腳是在頁面的底部：

.site-footer { 
    position:fixed; 
    bottom:0; 
    width:100%; 
    max-width:100%; 
}

但要小心，如果窗口的高度是「小」，將削減的主要內容。所以，這取決於你的主要內容，你只能在一定垂直高度後申請固定定位，例如像這樣：

@media (min-height:600px) { 
    /*fixed positioning here*/ 
}

來源

2015-02-07 13:14:56

我也對所有的答案給予了讚揚，因爲他們都會在很大程度上發揮作用。 – 2015-02-07 13:53:30

喜歡的東西：

.site-footer { 
color: #ddd; 
font-size: 14px; 
font-size: 1.4rem; 
text-align: center; 
position: fixed; 
bottom: 0px; 
left: 50%; 
margin-left: -120px; 
}

？

你的問題需要更多的信息...

來源

2015-02-07 13:00:52

試試這個代碼，它會幫助：

.my_footer { 
position : absolute; 
bottom : 0px; 
color: #0f0; 
padding : 0 auto; 
font-size: 16px; 
font-size: 1.0rem; 
text-align: center; 
left: 50%; 
}

的的位置是：絕對的;和bottom：0px;將使頁腳被放置在頁面的foo處。

來源

2015-02-07 13:09:54 Jiteen

頁腳到達底部。

CSS：

.site-footer { 
    bottom: 0; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    right: 0; 
    font-size: 1.4rem; 
    text-align: center; 
    color: #ddd; 
}

取出填充和利潤從一些地方，讓所有的主要內容進來一個頁面。例如：

.site-footer { 
    padding: 1em 0; 
} 
.menu-main-container { 

    margin-top: 30px; 
} 
p { 
    margin-bottom: 1.5em; 
}

因爲你的頁腳亙古不具有任何背景顏色，所以當主要內容的div較大頁腳重疊它並不好看。

來源

2015-02-07 13:14:06

頁腳底部 - 100％的高度

回答

相關問題