固定页脚自动向外扩展？

我想要使用这种视差效果http://jsfiddle.net/KsdeX/1/light/ 但唯一的问题是当使用最小高度而不是固定高度时，根据页脚内容，页脚展开内部。固定页脚自动向外扩展？

下面是与自动调整大小的例子
http://jsfiddle.net/KsdeX/62/

那么，有没有办法来推动或者使固定页脚汽车之外，没有展开下面的主体内容？

HTML

<div class="wrapper-parallax"> 
    <header> 
     <h1>Header</h1> 
    </header> 

    <div class="content"> 
     <h1>Content</h1> 
    </div> 

    <footer> 
     <h1>Footer</h1> 
    </footer> 
</div>

CSS

body { 
    margin: 0; 
} 
header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
    height: 100px; 
    background: cyan; 
} 

.content { 
    position: relative; 
    z-index: 1; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    background: white; 
    min-height: 500px; 
} 
wrapper-parallax { 
    margin-top: 100px; 
    margin-bottom: 60px; 
} 
footer { 
    width: 100%; 
    position: fixed; 
    z-index: -1; 
    bottom: 0; 
    background: green; 
    height: 60px; 
}

来源

2014-04-02 Eddi

你明白它是如何工作的？ 'position：fixed'，'bottom：0'将把元素完全从文档流中取出，并将其附加到屏幕的底部。你能够看到页眉或页脚的唯一原因是因为你的边缘位置，这就等于这些元素的确切高度。改变高度或者不预期这个并且改变包装的边缘将会导致多余的高度被遮盖。由于这些元素不在文档流中，因此不能动态影响其他元素。 – John

^这是一条评论，而不是一个答案，因为我没有解决方案，但我建议你可以做一些脚本计算来动态修改高度。重建/重新思考它的结构可能是一个更好的选择（以避免脚本），但没有什么明显的跳出来对我。 – John

这可以对你有用：[教程]（http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641） – brobken

你可以使用jQuery来计算你的footer的高度时，页面加载，然后用.css()分配一个值的.wrapper-parallax的margin-bottom。

$(document).ready(function() { 
    var footerHeight = $('footer').height(); 
    $('.wrapper-parallax').css('margin-bottom', footerHeight); 
});

http://jsfiddle.net/johntobinme/KsdeX/63/

来源

2014-04-02 10:26:05 John

谢谢，我现在试试。 – Eddi

真棒。它的工作原理，非常感谢您的帮助。 – Eddi

太好了，不客气。 – John

固定页脚自动向外扩展？

回答

相关问题