Div Full Width/Height of viewport
// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();
// set initial div height / width
$('div').css({
'width': winWidth,
'height': winHeight,
});
// make sure div stays full width/height on resize
$(window).resize(function(){
$('div').css({
'width': winWidth,
'height': winHeight,
});
});Written by Jake Chapman
Related protips
8 Responses
couldn't you achieve the same result with absolute positioning and height/width: 100% ?
div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</code>
no need for javascript this way.
@janvl You are right
Hey guys, you are absolutely correct.
I was messing around with Javascript awhile back trying to come up with a js only solution. Dumb, I know. But none the less you are right. :)
But this has other uses as far as trying to set the height/width of an element on the window.resize function
I used this method when fitting the width/ height of a slider element as same as width/ height of viewport. It would like a sectional area that fits the viewport and not overflowing from viewport edge before we scroll down the page.
i used this code to make a mega menu in bootstrap where the dropdown element is already positioned absolute,.. & styling its width to a 100% via CSS didn't work..
This is actually a great solution, as pages with content larger than the viewport would cause an absolutely positioned element to stretch beyond the visible area. I had issues with this on a client's site where their logo was not centered on the page (for a splash overlay with fadeOut) due to the content being taller than the viewport.
What if i want 3 or more divs with 100% height and width of the page for every viewport, so when you scroll down to another div it will have 100% width and height. Can i do it with this ?
Hi Everyone,
I need full height and window re size function.. As like upwork chat page so could you tell me plz how can i fix that issue with js and css :) http://screencast.com/t/bJikvDUFFjws
Thanks
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside