2010-12-20 54 views
0

我试图做的相反情况的粘滞脚印: 页脚应始终可见(它将重叠内容),但应坚持页面内容时浏览器的高度超过内容(内容将是一个固定的高度)。做相反的CSS粘页脚

基本上,我希望它表现得像位置:只在浏览器高度小于内容时才固定。

我已经没有(用最大高度,而不是最小高度),试图通过它只是CSS的方式stickyfooter类似,但是......

我的问题:当浏览器是比内容小,页脚最初粘贴到底部,但在滚动时它不会粘在底部。 As shown here

我猜将会有一些javascript让它卡在底部,但我还没有找到这样做的脚本(我不知道如何写一个自己...)

任何帮助,建议,链接将非常感激!谢谢。

HTML, BODY { height: 100%; 
    font-family: helvetica, arial; 
    font-size: 8pt; 
    } 
#wrapper { 
    margin: 0 auto; 
    width: 800px; 
    position:relative; 
    height:100%; 
    max-height: 516px; 
    } 
#content { 
    width:800px; 
    height:400px; 
    position: absolute; 
    background: #999; 
    border: 4px solid #000; 
    } 
#footer { 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
    width: 800px; 
    background-color: yellow; 
    border: 4px solid #f90; 
    } 

回答

0

你应该添加margin-bottom: 100px或更多到body类(其为页脚的高度)时为固定页脚被定位。

0

反向粘页脚?当然好。

我所做的只是分析认为OP提供的网站,我想出了一个的jsfiddle证明在订单所需的绝对最低性能HTML/CSS来实现这种效果:

jsFiddle

重要的事情需要注意的是,body需要应用max-height属性。要小心,因为这可能会有所不同,具体取决于它包含多少内容。我将很快用js更新我的示例,以显示如何自动完成此操作。