CSS/javascript for making div same size as page/document

Question

Setting

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

makes the div the same size as the visible page, but if you have an active scrollbar then the div isn't actually the same size as the complete page.

Is there a way around this in CSS?

Or if not, what is the simplest javascript/jQuery solution.

Edit: here is a jsFiddle as people seem to be misunderstanding the problem. Scroll down! http://jsfiddle.net/QEzbP/

Answer 1

Forget height and width. Add bottom and right properties:

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

That will fill the page completely.

EDIT: Note that the container of the div must be position:relative, so in that case the body of the HTML document would have to be given that rule:

body {
 position: relative;  
}

Answer 2

I did something like below in my project , it should be same for you

    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

Try to use positio: fixed but I don't believe it will solve the problem, the most indicated in that case is to use an image as your background and then use the background-repeat propertie.

background-repeat: repeat-x;

For sure it will solve your problem.

Good Luck.

Answer 5

If I have understan you need this in jQuery:

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

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

hope it work good for you.