带有固定页脚的 CSS 固定视频背景 div

Question

我正在尝试将视频作为某些网站的背景(这可以是用作背景的任何其他复杂的 div 内容)。那里的问题是它应该是一个“位置:固定”的，以及页脚(这是要求 - 页脚不应该随滚动移动)。我已经苦苦挣扎了几个小时，但还是无法实现——当主要内容大于窗口大小时，滚动会像 fiddle 一样揭示问题:

http://jsfiddle.net/h4ss1hLu/

代码如下:CSS:

* { margin:0; padding:0}
html, body {
    height: 100%;
    width: 100%;
}
#main {
    position: relative;
    min-height: 100%;   
    height: 100%;
    background-color: rgba( 245, 245, 245, 0.75);
}
#wrappedContent {
    padding-bottom: 40px;
}

#videoBG {
    position: fixed;
    bottom: 40px;
    top: 0px;
    background-color: #f00;
    width: 100%
}

footer {
    height: 40px;
    margin-top: -40px;
    position: fixed;
    background-color: #00f;
}

html:

<div id="videoBG"></div>
<div id="main">
    <div id="wrappedContent">
        some big block of content<br>
        it should have the videoBG layer<br>
        under it and fixed - scrolling should not affect the videoBG <br>
        position and its height should be <br>
        equal to the window-height without the footer<br>
        but as you can see - it is not - the red BG is far longer than it should<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
        some big block of content<br>
    </div>
</div>
<footer>
    footer content
</footer>

有什么想法吗？谢谢!

Answer 1

我为这个例子在你的视频容器中添加了一张图片，但这可以很容易地更改为你需要的任何内容。它也是响应式的。

示例:http://jsfiddle.net/h4ss1hLu/

如果您正在使用视频，您可能希望使用全屏视频 js 插件，以便轻松地跨浏览器兼容。

HTML

<div id="videoBG"><img src="http://lorempixel.com/400/300/"></div>
<div id="main">
    <div id="wrappedContent">
        some big block of content<br>
...the rest of your html

CSS

* { margin:0; padding:0}
html, body {
    height: 100%;
    width: 100%;
}
#main {
    position: relative;
    min-height: 100%;   
    height: 100%;
    background-color: rgba( 245, 245, 245, 0.75);
}
#wrappedContent {
    padding-bottom: 40px;
}

#videoBG {
    position: fixed;
    top: 0px;
    bottom: 40px;
    width: 100%;
    height: 100%;
}
#videoBG img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

footer {
    position: fixed;
    margin-top: -40px;
    height: 40px;
    width: 100%;
    background-color: green;
}