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

Question

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

好的,所以我想要一系列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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Jus*_*oll 7

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

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

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

如果你想"欺骗"一个元素的高度不是它想要默认的高度,你就必须明确定义它.既然你想要inherit自己的高度viewport,你必须在顶部定义高度并将其降低......

你可能很幸运,可以完全避免使用JavaScript(不必要).只需使用CSS.

尝试类似的东西:

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

Run Code Online (Sandbox Code Playgroud)

现在,当您尝试稍后设置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>

Run Code Online (Sandbox Code Playgroud)

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
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 5

尝试这个

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

它应该为您工作，但在IE中几乎没有支持

归档时间：	12 年，2 月前
查看次数：	8712 次
最近记录：	9 年，2 月前