Fatal编程技术网
  • javascript/
  • Javascript 如何将div调整为客户端视口高度？

Javascript 如何将div调整为客户端视口高度？

javascript html

Javascript 如何将div调整为客户端视口高度？,javascript,html,height,Javascript,Html,Height,好的，我想要一系列div，它们是用户浏览器窗口的精确宽度和高度，而不管屏幕大小。我可以用“宽度：100%；”轻松地使div水平拉伸，但我无法计算如何使高度本身拉伸。我猜我需要使用一些javascript来判断高度，然后再使用另一块来调整单独div的大小。不幸的是，我是一个完整的javascript n00b，经过两个小时看似毫无结果的搜索，找到了大约100个“解决方案”，这是我所能得到的（我确信，在某个时候，我可能已经接近了答案）： var viewportHeight=“height:+doc

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

var viewportHeight=“height:+document.documentElement.clientHeight；
getElementById（'section-1'）。setAttribute（'style'，viewportHeight）；
编辑：
啊，我应该更清楚，我试图让所有三个div占据整个屏幕，所以你必须向下滚动才能看到每个div-几乎就像单独的幻灯片一样。其思想是，每个div占据整个屏幕，因此只有向下滚动才能看到下一部分，而不是三个div占据屏幕的三分之一。

这是一个无脚本的解决方案，只是CSS。这假设div直接位于body元素中，或者父元素具有position 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;
}
请参阅fiddle:

如果您还没有尝试过，您将希望通过使用CSS查看DOM中元素的父级：子级继承

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

诀窍在于大多数元素都有一个未定义的高度，而高度后来由元素所包含的内容来定义

如果您想“欺骗”一个元素，使其具有一个不同于默认值的高度，那么您必须显式地定义它。由于您希望从
视口继承高度，因此必须在顶部定义高度并将其降低

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

尝试以下方法：


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


现在，当您稍后尝试设置
div
时，请指定
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>



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

});


试试这个


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

}


试试这个


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

}



欢迎光临{
高度：100vh；
背景：黑色；
颜色：白色；
}
部门项目{
高度：100vh；
背景：黄色；
}

您在屏幕1上的内容
屏幕2上的内容
啊，我应该说得更清楚些，我正试图让所有三个div占据整个屏幕，所以你必须向下滚动才能看到每个div，就像是单独的幻灯片一样。其思想是，每一个div都占据整个屏幕，因此只有向下滚动才能看到下一部分，而不是三个div占据屏幕的三分之一。@tompson啊。。。这几乎是一样的。请看编辑后的css和fiddle。这似乎也不起作用，这里是我得到的。很抱歉，我忘了在第一个示例中添加分号（您在JSFIDLE中使用了分号）。现在一切都好了，伙计，别觉得自己很蠢。很高兴你在问问题。这是一个简单的解决办法：P。只要等到它到达硬sh！实际上，您需要JavaScript（这很简单，但有自己独特的“gotchas”）。别忘了在解决问题的答案上加上“绿色复选标记”。啊哈，选中了！我觉得这很傻，因为名誉的缘故我不能和你在一起。再次欢呼贾斯汀尼仍然对
窗口
、
文档
、
html
、
主体
和视口的高度感到困惑。我不知道哪一个是多少。是否有一个很好的教程，我无法通过搜索找到？嗨，谢谢你的建议，但它似乎不适合我，我一定是实施错误？我只是把它放在头部的一些标记之间，还是应该放在其他地方？这是正确的，但是您必须确保首先包含jQuery库。在代码之前添加这个，这正是我在代码中需要的。缩放时地图闪烁停止 
window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;"; 
document.getElementById('section-1').setAttribute('style', viewportHeight);

}