如何调整div到客户端视口高度？

Question

好的，所以我想要一系列div，它们是用户浏览器窗口的精确宽度和高度，无论屏幕大小如何。 我可以轻松地使用“宽度：100％”水平拉伸div。 但我无法弄清楚如何使高度伸展自己。 我猜我需要使用一些javascript来判断高度，然后另一块来调整单独的div。 不幸的是，我是一个完整的javascript n00b，经过两个小时看似毫无结果的搜索，并提出了大约100个“解决方案”，这就是id得到的（我确信在某些时候我可能已经接近答案了）：

var viewportHeight = "height:" + document.documentElement.clientHeight; 

getElementById('section-1').setAttribute('style', viewportHeight);



<div class="section" id="section-1"></div>

<div class="section" id="section-2"></div>

<div class="section" id="section-3"></div>

编辑：啊我应该更清楚，我试图让所有三个div占据整个屏幕，所以你必须向下滚动才能看到每一个 - 几乎像单独的幻灯片。 我们的想法是每个人占据整个屏幕，所以你不能看到下一部分，直到你向下滚动，而不是有三个div占据屏幕的三分之一。

Answer 1

如果您还没有尝试过，那么您将需要查看parent：通过使用CSS在DOM中继承元素。

我想强调的是，每个人都让你JS黑客做到这一点，不仅为您提供矫枉过正（你没有要求一个JavaScript的解决方案，让他们给你的！），但它也从标准的偏差。 HTML用于结构，CSS用于表示，JavaScript用于行为方面...在加载时将div设置为视口的宽度是一个PRESENTATION方面，应该在CSS ...而不是JavaScript中完成。 如果你试图根据事件或用户交互来改变宽度，那么JavaScript就是你的朋友......但是现在只使用HTML和CSS。

诀窍是大多数元素具有未定义的高度 - 高度稍后由元素保存的内容定义。

如果你想“欺骗”一个元素的高度不是它想要默认的高度，你就必须明确定义它。 由于您希望从viewport inherit高度，因此您必须在顶部定义高度并将其降低...

你可能很幸运，可以完全避免使用JavaScript（不必要）。 只需使用CSS。

尝试类似的东西：

html, body {
    height: 100%;
    width: 100%;
}

现在，当您尝试稍后设置div时，指定width: 100%并且高度从html - > body - > div继承。

尝试一下，看看是否能解决您的问题 - 如果没有，请将我们指向一个网站，一个垃圾箱或一个包含代码的SOMETHING，我们可以告诉您如何操作（而您发布的代码是为了尝试JavaScript只是代码的一部分 - 将完整的内容发布到服务器或临时站点（如pastebin）。

以下是我编写的一些示例代码（在Chromium中测试）：

HTML：

<html>
<head>
    <title>Test Divs at 100%</title>
    <link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>

CSS：

html, body {
    width: 100%;
    height: 100%;
    background-color: #793434;
    padding: 0;
    margin: 0;
}

div {
    height: 100%;
    width: 100%;
}

.test1 {
    background-color: #E3C42E;
}

.test2 {
    background-color: #B42626;
}

.test3 {
    background-color: #19D443
}

Answer 2

尝试这个

 div#welcome { height: 100vh; background: black; color: white; } div#projects { height: 100vh; background: yellow; }

 <div id="welcome"> your content on screen 1 </div> <div id="projects"> your content on screen 2 </div>

它应该适合你，但在IE中很少支持

Answer 3

这是一个免费的脚本解决方案，只有CSS。 这假设div直接在body元素中或父级位置为absolute而父级没有填充。

#section-1 {
   position: absolute;
   height: 100%;
   width: 100%;
   background: #ff0000;
}

#section-2 {
   position: absolute;
   width: 100%;
   top: 100%;
   height: 100%;
   background: #00ff00;
}

#section-3 {
   position: absolute;
   width: 100%;
   top: 200%;
   height: 100%;
   background: #0000ff;
}

见小提琴： http ： //jsfiddle.net/QtvU5/1/

Answer 4

一点jQuery应该这样做：

$(document).ready(function() {
   var window_height = $(window).height();
   $('#section-1").height(window_height);
});

如果你想在窗口调整大小时保持100％的高度：

$(document).ready(function() {

   function viewport_height() {
      var window_height = $(window).height();
      $('#section-1").height(window_height);
   }

   viewport_height();

   $(window).resize(function() {
      viewport_height();
  });

});

Answer 5

尝试这个

window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;"; 
document.getElementById('section-1').setAttribute('style', viewportHeight);

}

如何调整div到客户端视口高度？

问题描述

5 个解决方案

解决方案1
7 已采纳 2013-10-05 04:10:34

解决方案2
3 2016-09-22 06:58:56

解决方案3
0 2013-10-05 04:09:10

解决方案4
0 2013-10-05 04:21:50

解决方案5
0 2013-10-05 04:27:34

如何调整div到客户端视口高度？

问题描述

5 个解决方案

解决方案1 7 已采纳 2013-10-05 04:10:34

解决方案2 3 2016-09-22 06:58:56

解决方案3 0 2013-10-05 04:09:10

解决方案4 0 2013-10-05 04:21:50

解决方案5 0 2013-10-05 04:27:34

解决方案1
7 已采纳 2013-10-05 04:10:34

解决方案2
3 2016-09-22 06:58:56

解决方案3
0 2013-10-05 04:09:10

解决方案4
0 2013-10-05 04:21:50

解决方案5
0 2013-10-05 04:27:34