jquery - Div 不会跨越文档的边界并具有屏幕的高度

Question

所以我在这里尝试了几种解决方案，但似乎找不到适合我的解决方案。

我在背景中有这个 div，颜色为浅蓝色。我已经将它的最小高度设置为与文档的高度相匹配，但问题是我的 jQuery 代码不起作用。

var windowHeight = $(window).height();
var documentHeight = $(document).height();

if ( windowHeight > documentHeight ) {
    $("#blueBackgroundBarVertical").height = windowHeight;
}

这是CCS代码：

#blueBackgroundBarVertical {
min-height: 631px;
width: 150px;
background-color: rgba(0, 204, 255, 0.4);
position: absolute;
top: 0;
margin-left: 695px;
z-index: -10; }

我尝试将“高度”设置为 100%，但是小屏幕出现问题，因为这是屏幕的 100%，所以当您在较长的页面上向下滚动时，该栏的其余部分会消失底端..

Answer 1

而不是使用.height = windowHeight使用这个

var windowHeight = $(window).height();
var documentHeight = $(document).height();

$(window).resize(function () {
    if (windowHeight === documentHeight) {
        $("#blueBackgroundBarVertical").height($(window).height());
    }
});
if (windowHeight === documentHeight) {
    $("#blueBackgroundBarVertical").height(windowHeight);
}

此外，如果窗口和站点具有相同的尺寸，则 if 语句永远不会为真

http://jsfiddle.net/Hive7/smtWJ/2/

还要确保你有一个 js 文件