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中继承元素。

我想要 STRESS 是每个人都给你JS黑客来实现这一点不仅为你提供过度杀伤（你确实要求JavaScript解决方案，所以他们给了你！），但这也是对标准的偏离。 HTML用于结构，CSS用于表示，JavaScript用于行为方面...在加载时将div设置为视口的宽度是一个PRESENTATION方面，应该在CSS ...而不是JavaScript中完成。如果你试图根据事件或用户交互来改变宽度，那么JavaScript就是你的朋友......但是现在只使用HTML和CSS。

诀窍是大多数元素都有一个未定义的高度 - 高度后来由元素保存的内容定义。

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

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

尝试类似：

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

现在，当您稍后尝试设置div时，请指定width: 100%，并从html继承高度 - ＆gt;身体 - ＆gt;格。

尝试一下，看看是否能解决您的问题 - 如果没有，请将我们指向一个网站，一个垃圾箱或带有代码的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元素中，或者父级位置为父级，父级没有填充。

#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 个答案: