Making content take up 100% of window size

[Ben89]

Ok so I have a div with a size of 716 x 485 pixels and basically to make things short, I want this div which contains my main content to have an invisible border around it that takes up 100% of the window size so that all content outside of this border will fall outside of what's visible in the browser window.

Here's what I tried in my style sheet:

#entire{
height:100%;
width:100%;
border-style:solid;
border-width:1px;
}

I added the border properties in order to be able to check whether the div is actually taking up 100% of the screen size but it's only taking up 100% of the width of the screen. In other words, when I resize the browser window horizontally, the border gets smaller/bigger, but when I resize the browser window vertically, the border's size does not change.

What's the problem here guys? Thanks in advance.

 

[jryan21]

If your div is 485px, then wouldn't the 100% make the div height 485px?

If you want more height, you could use min-height. and also (this applies to the div content) you can use overflow:hide if you are worried about the content taking more space than the div size.