2013-02-04 47 views
0

我有一个固定位置的页脚,我试图保留在页面的底部,但也让它在调整大小时不遵循浏览器窗口。因此,如果我从底部拖动Firefox,它就会隐藏起来。调整窗口大小时隐藏的页脚?

我试过相对位置,这使得页脚跳起来,并坐在标题下。我也试过绝对的位置,我认为这是一个正确的位置,但它似乎与固定的位置一样。

CSS:

html, body { 
    height: 100%; 
    width: 100%; 
    overflow-x: hidden; 
    margin: 0; 
    padding: 0; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 12px; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
}    
#wrapper { 
    min-height: 100%; 
    position: relative; 
} 
#header { 
    width: 100%; 
    padding: 10px; 
    background-color: #fff; 
    position: relative; 
    -webkit-box-shadow: 0px 0px 30px #7a7a7a; 
    -moz-box-shadow: 0px 0px 30px #7a7a7a; 
    box-shadow: 0px 0px 30px #7a7a7a; 
} 
#content { 
    padding: 10px; 
    padding-bottom :45px; 
} 
#footer { 
    width: 100%; 
    height: 45px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #222; 
    margin: 0; 
    padding: 0; 
} 

任何想法?

+0

在jsfiddle中发布一个工作示例。 – Axel

回答

0

我相信我已经解决了您的问题。您需要像以前一样使用position: absolute;,但是不必像从前那样指定位置/位置,您必须像这样从顶部指定它:top: 500px;这样,您可以将内容插入到页脚上方,并且它仍然保留在它的位置您调整浏览器窗口的大小!

编辑:经过一番研究我发现,另一种方式是把在包含块(其是固定被定位一个元素或者相对绝对,或)一个的内容和然后将其放在文档源的底部,然后从那里开始。

+0

是的,这不会真的不幸。我需要它在任何显示的位置坐在相同的位置 – user2037183

+0

您可能必须使用一些JavaScript来确定用户浏览器窗口高度并相应地调整您的CSS。这里有一个链接:http://www.w3schools.com/js/js_window.asp – Chakotay

相关问题