将div高度设置为窗口高度(使用CSS时不是100%)

Question

我想用jQuery/JavaScript（我不擅长）获得窗口高度，并用类"slide"将其应用于几个div（3-4）。我为什么不想在CSS中使用height: 100%;，是因为一些元素被高度为100%的元素覆盖：屏幕截图（我可以让页脚100%高，但那会很乱），也因为高度随着放大/缩小而变化（即，它不是停留在例如1080p，而是变为100%，并且在缩小时仍然填充窗口）。

然后我在stackoverflow上找到了一些答案，有些人建议这样做：（来自：这里）

$(document).ready(function(){
	$(".slide").css("height", $(window).height());
});
$(window).resize(function(){
	$('.slide').css('height':($(window).height());
});

我把它编辑了一下。

我读了很多关于同一问题的其他帖子，尝试了所有的方法，但似乎都不起作用。甚至制作了一组新的文件来单独测试这个问题，请在JSFiddle上查看。

提前感谢！

Answer 1

你的问题中的代码是正确的，但你的fiddle中的代码错了：你在想要,的地方使用了:（另外，你的fiidle中没有包含jQuery）。

代码应该是

$(document).ready(function(){
    $('.slide').css('height', $(window).height());
    // Comma, not colon ----^
});
$(window).resize(function(){
    $('.slide').css('height', $(window).height());
    // Comma, not colon ----^
});

更新了Fiddle（我在幻灯片中添加了背景，这样你就可以看到它的全高）

请注意，在fiddle中，由于body上的默认填充，您最终会看到滚动条。但我认为，在你的真实网站/应用程序中，你是在CSS中处理这个问题的。