jquery - 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％，因此当您向下滚动较长的页面时，其余的条都消失了底部..

最佳答案

代替使用.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文件