Set div height to window height (Not 100% with CSS)

Question

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 (i.e. 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!

Answer 1

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.