飼養頁腳滾動水平

我有一個完全水平滾動的網站，飼養頁腳滾動水平

TopNav（固定位置）

NAV（固定位置）

內容（橫盤滾動）

頁腳（固定位置）

一切似乎是偉大的工作，但我的問題是，如果內容爲b ig足以水平滾動，它將頁腳放在水平滾動條的後面，因此在幾頁上我使用#footer {bottom：16px}左右來考慮橫向滾動條。

我遇到的問題是不同的顯示器分辨率。顯然內容將根據窗口大小水平滾動或不滾動。有什麼方法可以將頁腳保持在底部（或水平滾動條上方）無論什麼分辨率或窗口大小？

來源

2011-05-25 Brandon

什麼瀏覽器您使用？因爲在Firefox中我無法重現你的問題。你可以給頁腳一個填充底部：16px;這樣一個scollbar不能阻止任何內容，如果滾動條不在那裏，你不會有16px頁腳下面的空白。 – Gerben 2011-05-25 16:36:12

這個問題實際上在任何瀏覽器中。我的內容div是側身滾動。如果內容橫向滾動，則頁腳隱藏在水平滾動後面，因此添加底部：16px。如果內容不需要橫向滾動（意味着沒有足夠的內容來強制滾動），則頁腳比應該顯示的位置高出16px。 – Brandon 2011-05-25 16:42:50

看到它：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – 2012-07-26 19:31:14

大量的試驗和錯誤之後，我發現這是一個永遠在線的最底尺的最佳解決方案：

HTML：

<div class="footer"> 

    <div class="footer_contents"></div> 

</div>

CSS：

.footer { 

    height:24px; // Replace with the height your footer should be 
    width: 100%; // Don't change 
    background-image: none; 
    background-repeat: repeat; 
    background-attachment: scroll; 
    background-position: 0% 0%; 
    position: fixed; 
    bottom: 0pt; 
    left: 0pt; 

} 

.footer_contents { 

    height:24px; // Replace with the height your footer should be 
    width: 1000px; // Visible width of footer 
    margin:auto; 

}

來源

2011-06-05 23:31:23

您的修補程序幫助我！我還必須將頁腳上方的div（主div）的底部邊距設置爲大於頁腳高度的值。這可以防止在調整頁面大小時頁腳來自主體內容。希望這可以幫助。 '.main {padding：0px 12px; margin：12px 8px 40px 8px;最小高度：420; }''.footer { font-family：Arial; font-size：13px; 職位：固定; bottom：0pt; left：0pt; 寬度：98％; 背景：＃272727; color：#fff; text-align：right; height：26px; }' – Rama 2013-03-11 04:22:53

像魔法一樣工作:) – th3an0maly 2013-03-17 13:31:24

偉大的加法@dasariramacharanprasad :) – 2014-10-01 07:01:40

有兩個可能性我看：

1日選項 隊的身體始終顯示滾動條。但這可能看起來很奇怪。

body { overflow-x: scroll; }

第二個選項 讓你的內容容器總是你的頁腳上面。這是可能的，如果你的頁腳有一個固定的高度。然後，您將在頁腳上方顯示滾動條。

<div id="contentWrapper"> 
    <div id="content">Here comes your content</div> 
</div>

而且這裏的CSS我將解釋現在

body, html { 
    height: 100%; 
    overflow: hidden; 
} 

#contentWrapper { 
    overflow-x:auto; 
    overflow-y: hidden; 
    height: 100%; 
    margin-top: -16px; // add the footer height 
} 

#content { 
    padding-top: 16px; // add the footer height 
    width: 6000px; 
}

的#contentWrapper必須有滾動條的高度加上切緣陰性你的頁腳高度。 #content必須具有與頂部填充相同的值，因此頂部的內容不會出現在頁面之外。

來源

2011-05-25 16:43:43 DanielB

我最好的想法是將廣泛的內容作爲自己的可滾動div的一部分。頁腳會留在內容的底部，看起來總是居中。

如果你想讓滾動條不在頁腳之上，你可以用div和一些css來做一些奇特的事情，比如在廣泛的內容下面放置一個空白的頁腳大小的div，並製作真正的頁腳有頂： - （頁腳的高度）

來源

2011-05-25 17:07:18 rk1s

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>

的CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}

而對於IE 6和IE 5.5一個簡單的CSS規則：

#container { 
    height:100%; 
}

來源

2012-11-10 09:15:09 Dennis

飼養頁腳滾動水平

回答

相關問題