2

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

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 占据整个屏幕，因此在向下滚动之前您无法看到下一部分，而不是让三个 div 占据屏幕的三分之一。

4

5 回答 5

8

如果你还没有尝试过，你会想通过使用 CSS 来查看 DOM 中元素的父子继承。

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

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

如果您想“欺骗”一个元素使其具有不同于其默认高度的高度，则必须明确定义它。由于您想inherit从 高度viewport，您必须定义顶部的高度并将其降低...

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

尝试类似：

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

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

尝试一下，看看是否能解决您的问题 - 如果没有，请将我们指向一个网站、一个 pastebin 或其中包含代码的一些东西，我们可以向您展示如何做到这一点（而您发布的代码是一个尝试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
}
于 2013-10-05T04:10:34.390 回答
5

尝试这个

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 中几乎没有支持

于 2016-09-22T06:58:56.270 回答
0

这是一个无脚本的解决方案，只是 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/

于 2013-10-05T04:09:10.860 回答
0

一点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();
  });

});
于 2013-10-05T04:21:50.847 回答
0

尝试这个

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

}
于 2013-10-05T04:27:34.803 回答