我有一個完全水平滾動的網站,飼養頁腳滾動水平
TopNav(固定位置)
NAV(固定位置)
內容(橫盤滾動)
頁腳(固定位置)
一切似乎是偉大的工作,但我的問題是,如果內容爲b ig足以水平滾動,它將頁腳放在水平滾動條的後面,因此在幾頁上我使用#footer {bottom:16px}左右來考慮橫向滾動條。
我遇到的問題是不同的顯示器分辨率。顯然內容將根據窗口大小水平滾動或不滾動。有什麼方法可以將頁腳保持在底部(或水平滾動條上方)無論什麼分辨率或窗口大小?
我有一個完全水平滾動的網站,飼養頁腳滾動水平
TopNav(固定位置)
NAV(固定位置)
內容(橫盤滾動)
頁腳(固定位置)
一切似乎是偉大的工作,但我的問題是,如果內容爲b ig足以水平滾動,它將頁腳放在水平滾動條的後面,因此在幾頁上我使用#footer {bottom:16px}左右來考慮橫向滾動條。
我遇到的問題是不同的顯示器分辨率。顯然內容將根據窗口大小水平滾動或不滾動。有什麼方法可以將頁腳保持在底部(或水平滾動條上方)無論什麼分辨率或窗口大小?
大量的試驗和錯誤之後,我發現這是一個永遠在線的最底尺的最佳解決方案:
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;
}
您的修補程序幫助我!我還必須將頁腳上方的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
必須具有與頂部填充相同的值,因此頂部的內容不會出現在頁面之外。
我最好的想法是將廣泛的內容作爲自己的可滾動div的一部分。頁腳會留在內容的底部,看起來總是居中。
如果你想讓滾動條不在頁腳之上,你可以用div和一些css來做一些奇特的事情,比如在廣泛的內容下面放置一個空白的頁腳大小的div,並製作真正的頁腳有頂: - (頁腳的高度)
<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%;
}
什麼瀏覽器您使用?因爲在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