2012-09-17 30 views
0

我已經google和閱讀幾乎所有我可以找到關於做一個「粘腳」,但由於某種原因,我只是無法讓它正常工作。下面是我對HTML /體格,主要內容股利和我的頁腳DIV + CSS代碼:可以禁用我的頁腳棒,並提供一個滾動條的內容

body, html { 
margin-top: 5px; 
margin-bottom: 5px; 
padding: 0px; 
height: 100%; 
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial; 
font-size: 1em; 
color: #666666; 
background-color: #EDF5FC;} 

#main { 
position: relative; 
top: 380px; 
width: 90%; 
height:100%; 
min-height: 100%; 
margin: 0px 5% -20px 5%; 
z-index: 10; 
padding-top: 0px; 
padding-bottom: 20px; 
overflow:scroll;} 

#footer { 
clear:both; 
position:fixed; 
margin-left:auto; 
margin-right:auto; 
margin-bottom:0px; 
margin-top: -20px; /* negative value of footer height */ 
width:98%; 
height:20px; 
padding-top:3px; 
background: #0E28B1; 
text-align: center; 
color: #ffffff; 
font-size: .7em; 
font-weight:bold; 
z-index:1;} 

我的頁腳股利是我主要的div外(該網站的主要內容是主要的div裏面,然後我關閉它並有頁腳div。)我可以通過使用固定位置和margin-bottom:0來獲得它的底部,但是然後我沒有滾動條來顯示我的內容。

這根本不起作用。我究竟做錯了什麼?

回答

1

我終於找到了適合我的解決方案!我找到了這個網站:http://boagworld.com/dev/fixed-footers-without-javascript/並修改了一小段代碼,這樣我的頁腳文本很好地垂直和水平居中,並且在主(內容)div中添加了我的頁面頂部高度。我想這會不會沒有第三「#wrapper指定」 DIV正常工作封閉一切 - 所以現在這裏是我的包裝,主要和頁腳的CSS對於那些具有相同的問題:

#wrapper { 
display: block; 
position: absolute; 
min-height: 100%; } 

#main { 
display: block; 
top: 400px; 
width: 90%; 
margin-bottom: 20px; } 

#footer { 
position: fixed; 
display: block; 
bottom: 0; 
height: 20px; 
background: #0E28B1; 
width: 98%; 
margin-right:auto; 
margin-left:auto; 
font-size: .7em; 
font-weight:bold; 
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial; 
color: #ffffff; 
text-align:center; 
z-index:2; 
padding-top:3px;} 

我不得不做出的Z - 在頁腳2而不是1中將索引保留在內容文本的頂部。但現在它起作用了。在我找到這個解決方案之前,我曾搜索過很多網站(包括這個網站),所以我希望這可以幫助某人。

相關問題