Question

我想将div大小设置为打开时浏览器窗口的大小。

我用这个来获得窗户高度..

    var height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

但现在我被困在如何将这个高度传递给html ..

我要调整大小的div里面有很多内容所以我不认为我可以简单地使用replaceWith（）并将新的高度css内联，因为我还需要传递所有其他的html，这将是一个痛苦。

如果你能同时回答js和/或jQ，那就太棒了。

谢谢

Answer 1

维度单位'vh'和'vw'被添加到CSS3中以执行此类操作。将高度设置为100vh应该可以达到你想要的效果。

Answer 2

小提琴：https://jsfiddle.net/d0ufr8hx/

HTML：

<div>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

jQuery的：

$(document).ready(function () {
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    $('div').height(height)
});

或者，使用纯CSS解决方案（vh和vw）：

div {
    width: 100vw;
    height: 100vh;
}

如果您尝试支持旧浏览器，请谨慎vh和vw，例如，IE 11之外都不支持。Browser support for vh，browser support for vw。

Answer 3

所以根据你的纯javaScript代码你可以试试这个： -

 <div id="divId"></div>

document.getElementById('divId').style.height = height +"px"

获取窗口高度并将div大小设置为此高度

3 个答案: