Question

我有一个包装器，以y重复的背景图像为中心：

<body>
    <div id="wrapper">
        ...some content
    </div>
</body>

#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}

问题：当窗口大小高于从其内容继承的包装器高度时，图像显然不会在y轴上一直重复到窗口底部。

我已经使用jQuery根据实际文档高度动态地将内联CSS样式应用于包装器（当DOM准备好并且窗口调整大小事件时）：

$(function(){
    $('#wrapper').css({'height':($(document).height())+'px'});
    $(window).resize(function(){
        $('#wrapper').css({'height':($(document).height())+'px'});
    });
});

这种方法的问题在于，每次将窗口高度扩展到大于先前调整大小的最大尺寸的大小时，文档高度会因此差异而扩展，如果您无限地调整窗口大小，则基本上使包装器DIV无限大。有一个无限的垂直显示空间。

在典型的30英寸高度1600px的显示器上，当用户打开窗口高度为1000px且包装器高度为800px的网站时，上面的jQuery将高度设置为1000px正确平铺背景图像。此时，用户将窗口大小扩展到例如1400px，1400px是新文档大小“记住默认值”，即使用户将其窗口大小调整回原始的1000px高度，也不会更新自身，将 400px添加到滚动条高度< / b>在底部。

如何解决这个问题？

更新:(窗口）。高度似乎不起作用，因为窗口高度是视口高度。当您的视口小于内容并滚动它时，包装器始终保持视口的大小，并且不会延伸到当前视口位置的底部。

Answer 1

我在某人的回答的帮助下弄明白了。但他出于某种原因删除了它。

以下是解决方案：

删除所有CSS高度黑客和100％高度
使用2个嵌套包装器，一个在另一个中，例如#wrapper和#truecontent
获取浏览器视口的高度。如果它比#wrapper大，那么为#wrapper设置内联CSS以匹配当前浏览器视口高度（同时保持#truecontent完整）

监听（窗口）.resize事件并且仅在视口大于#truecontent的高度时应用内联CSS高度，否则保持原样

$(function(){
    var windowH = $(window).height();
    var wrapperH = $('#wrapper').height();
    if(windowH > wrapperH) {                            
        $('#wrapper').css({'height':($(window).height())+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('#wrapper').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('#truecontent').height();
        if(windowH > truecontentH) {
            $('#wrapper').css('height', (newH)+'px');
        }

    })          
});

Answer 2

最简单的方法是添加：

$('#ID').css("height", $(document).height());

在浏览器确定正确的页面高度之后。如果文档高度再次更改，请重新运行上述代码。

Answer 3

您可以将其设为absolute并将零添加到top和bottom，即：

#fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}

Answer 4

我找到的最简单的方法是在css中使用viewport-height。

div {height: 100vh;}

这将获取浏览器窗口的视口高度，并在调整大小时更新它。

请参阅"can i use" for browser compatibility list

Answer 5

html, body {
    height:100%;
}
#wrapper {
    min-height:100%;
}

Answer 6

这就是我回答的问题

<script type="text/javascript">
    function resizebg(){
        $('#background').css("height", $(document).height());
    }
    $(window).resize(function(){
        resizebg(); 
    });
    $(document).scroll(function(){
        resizebg(); 
    });
    //initial call
    resizebg();

</script>

的CSS：

#background{
position:absolute;
top:0;
left:0;
right:0;
}

所以基本上在每个调整大小的事件中，我将覆盖div的高度，在这种情况下，我用作背景覆盖的图像，并使其具有不透明度不那么多彩，我也可以在我的情况下用背景颜色着色

但那是另一个故事

Answer 7

使用#element{ height:100vh}

这会将#element的高度设置为viewport的100％。希望这会有所帮助。

Answer 8

为什么不使用width: 100%和height: 100%。

Answer 9

这是

<style type="text/css">
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background: url('image.JPG') 250px 0px repeat-y;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function handleResize() {
var h = $(window).height();
        $('#wrapper').css({'height':h+'px'});
}
$(function(){
        handleResize();

        $(window).resize(function(){
        handleResize();
    });
});
</script>
</head>
<body>
        <div id="wrapper">
                ...some content
        </div>
</body>

如何正确设置100％DIV高度以匹配文档/窗口高度？

9 个答案: