html - 将 div 设置为浏览器窗口的高度

Question

我有 2 个 div，一个在另一个之上，我希望它们都是浏览器窗口的 100% 宽度和高度，同时仍然保持它们在文档中的顺序。

目前你可以看到我刚刚添加了一个内联样式来给盒子 500px 的高度，所以它们是可见的。

到目前为止的相关代码可以在这里找到：

http://fiddle.jshell.net/pY6dc/9/

我对此很陌生，所以你可能需要用非常简单的术语来解释事情。我知道我可能需要某种形式的 javascript 才能实现这一点，甚至不知道从哪里开始。

克里斯

Answer 1

在 JavaScript 中执行此操作的一种方法：

$(".slide").height($(window).height());

它所做的是选择所有具有幻灯片类的元素，然后将它们的高度设置为窗口高度。

更新的小提琴：这里

但基本上我假设您可以自己连接 jQuery，一旦您这样做，您可以通过多种方式注册窗口加载功能，最简单的方式是在脚本标签中（更合适的方式是在文档的头部） .

---

<script type='text/javascript'>
   $(window).load(function(){
      $(".slide").height($(window).height());
   });
</script>