Question

设置

#myDiv
{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

使div与 visible 页面的大小相同，但如果您有一个活动的滚动条，则div实际上与整个页面的大小不同。

在CSS中有解决方法吗？

如果没有，那么最简单的javascript / jQuery解决方案是什么。

编辑：这里是一个jsFiddle，因为人们似乎误解了这个问题。向下滚动！ http://jsfiddle.net/QEzbP/

Answer 1

忘记身高和宽度。添加底部和右侧属性：

#myDiv
{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right: 0;
}

这将完全填满页面。

编辑：请注意，div的容器必须是position：relative，所以在这种情况下，HTML文档的主体必须被赋予该规则：

body {
 position: relative;  
}

Answer 2

我在项目中做了类似下面的事情，对你来说应该是一样的

    var docHeight = Math.max(
     $(document).height(),
     $(window).height(),
     /* For opera: */
     document.documentElement.clientHeight
     );
     var docWidth = Math.max(
     $(document).width(),
     $(window).width(),
     /* For opera: */
     document.documentElement.clientWidth
     );
     $("#VbackgroundPopup").css({
     "height":docHeight,
     "width":docWidth
 });

Answer 3

是的，它的大小相同，因为滚动条实际上会缩小页面。

Answer 4

尝试使用 positio：fixed 但我不相信它会解决这个问题，在这种情况下最常用的是使用图像作为背景，然后使用背景重复属性。

background-repeat：repeat-x;

肯定会解决您的问题。

祝你好运。

Answer 5

如果我已经知道你需要在jQuery中使用它：

$('#myDiv').width() = $(window).width();

if($('#myDiv').height() > $(window).height()) {
    $('#myDiv').width() = //here put the default size;
}

希望它对你有用。

用于使div与页面/文档大小相同的CSS / javascript

5 个答案: