I would like to get the window height with jQuery/JavaScript (which I'm not good at) and apply it to a few divs (3-4) with class 'slide'. Why I don't want to use height: 100%;
in CSS is because some elements get covered by the ones that have height to 100%: screenshot (I could make the footer 100% high but that would be a mess) and also because the height changes with zooming in/out (ie instead of staying for example 1080p, it changes to 100% and still fills window when zooming out).
So then I found some answers here on stackoverflow, and some people were suggesting something like this: (from: here )
$(document).ready(function(){ $(".slide").css("height", $(window).height()); }); $(window).resize(function(){ $('.slide').css('height':($(window).height()); });
I've edited it a bit.
I read a bunch of other posts on the same problem, and tried everything, but nothing seems to work for me. Even made a new set of files to test this alone, look at it on JSFiddle .
Thanks in advance!
The code in your question is correct, but the code in your fiddle is wrong: You've used a :
where you want a ,
(and separately, you haven't included jQuery in your fiddle).
The code should be
$(document).ready(function(){
$('.slide').css('height', $(window).height());
// Comma, not colon ----^
});
$(window).resize(function(){
$('.slide').css('height', $(window).height());
// Comma, not colon ----^
});
Updated Fiddle (I added a background to .slide so you could see it's the full height)
Note that in the fiddle you end up with scrollbars, because of the default padding on body
. But I assume in your real site/app, you're dealing with that in CSS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.