Question

我想使用这种视差效果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;
}

Answer 1

您可以使用jQuery计算页面加载时footer的高度，然后将.css()的值分配给margin-bottom的{{1}}。

.wrapper-parallax

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

固定页脚自动扩展到外面？

1 个答案: