Question

我正在尝试将视频作为某个网站的背景（这可能是用作背景的任何其他复杂div内容）。问题在于它应该是“位置：固定”的，以及页脚（这是要求 - 页脚不应该随着滚动移动）。我已经挣扎了几个小时但却无法实现这一切 - 当主要内容大于窗口大小时，滚动会显示问题，如小提琴：

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;
}

CSS修复了具有固定页脚的视频背景div

1 个答案: