100% height fill page only

Question

Is it possible to have 100% height but have the div fill out the entire page only.

So if i put 100% height on a div, it should extend the div all the way down to the end of the page but not extend anymore to bring any scroll bars. Is that possible? I know height:100% takes the page's height and puts the div's height to that number but I don't want the div to actually have the height of that number, but only extend till end of page, no more than that.

Is it possible with 100% height or anything else?

I appreciate your help.

Thanks

Answer 1

you can use

<div style="top:0;bottom:0,left:0,right:0;"></div>

or using jquery:

 $("#mydiv").height($(window).height());

Answer 2

Without padding or border, if you declare the html, body, and div 100%, it will extend to the size of the browser window.

If you want to use padding and border, consider using the CSS3 property box-sizing: border-box;

Demo

Update:

Using pseudo-elements (you could use an empty div):

.top{height:100px; width:100%; position:absolute; top:0; left:0;}
.rest{min-height:100%; background:lightblue; }
.rest:before{content:''; display:block; width:100%; height:100px;}

Demo