Javascript 如何为元素指定高度，使高度等于屏幕的高度？

我有一个

，里面有一些内容

<section class="Header">
    <h1 class="mainHeader">Lorem ipsum dolor sit amet con</h1>
    <h3 class="subHeader">obcaecati laboriosam iste ad exercitationem culpa aspernatur, molestias</h3>
</section>

---

但这两款机型都不适用于较小的屏幕尺寸。

标题的高度大于屏幕大小。

总结：

主要问题：如何为元素指定高度，使高度等于屏幕高度（查看网站时使用的屏幕高度）


有人知道怎么做吗？
要获得屏幕的高度，可以使用对象，其中有几个可用属性，如
screen.height
和
screen.width

例如，这将为您提供变量中的屏幕高度：

让屏幕高度=window.screen.height；

现在，您可以使用该高度以动态/编程方式更改屏幕确切高度所需的任何内容。例如，设置图元的高度：

让yourElement=document.getElementById（'elementsId'）；
yourElement.style.height=屏幕高度；

编辑

您还可以尝试使用获取视口高度，因为它基于视口的宽度：

让viewHeight=window.innerHeight；

虽然您可能需要调整一些像素，但这会更好地处理您的媒体查询


使用硬编码宽度和高度时要小心。它们可以在一个屏幕尺寸上看起来很棒，但会破坏所有其他屏幕尺寸。当需要考虑响应性时，尝试使用基于百分比的大小调整，并在布局中使用和之类的东西。
这对您不适用吗


html，
身体{
保证金：0；
填充：0；
}
.标题{
高度：100vh；
溢出：隐藏；
背景色：黄色；/*仅显示该区域*/
}

Lorem ipsum dolor sit amet con
实验室检查和实践中的小白鼠、小白鼠
此内容位于标题之后
您说的“不在小视口上工作”是什么意思
100vh
始终是视口（浏览器窗口）的高度。@CalvinNunes我编辑了评论“但它们都不适用于较小的视口”。您能解释一下为什么它不适用吗？您正在测试哪些浏览器？在哪些设备中？台式机，移动设备？可以给我看一下吗？我们目前正在猜测解决方案。如果它比屏幕尺寸长，可能是因为它的某些内容迫使它变长。。。a在这里可能有用。但不管怎样，我一直在问：你在测试哪些浏览器？在哪些设备中？桌面，手机？屏幕高度会动态变化吗？@evolutionxbox我不知道。
var vHeight = $(window).height(),
  header= $('.Header');

header.css({
  "height": vHeight
});