如何将 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>

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

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

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

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

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

你可能很幸运，可以完全避免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>

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
}

试试这个

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

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

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

相关内容

最新更新

热门标签：