如何为元素分配高度，使高度等于屏幕的高度？

Question

我有一个<section>，里面有一些内容。

<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>

我已将一些CSS 分配给Header 的所有subclasses。只是为了让它们看起来不错。 Header 应该是屏幕的高度。因为在每个视口中所有subclasses 的字体大小都会改变。

目前，我已经给了subHeader margin-bottom 来制作Header 的screen size。但这是一种错误的做法，因为我每次都需要为每个viewport 更改subHeader 的margin-bottom。加上许多screensizes，它可能比screen 短或长。

当我分配 media query 以使网站响应时。对于较小的屏幕尺寸，例如：（最大宽度：768px）我减少了text 的size，并且header 向上移动，但我希望它始终是设备的height，而不是更改其height 甚至是font-size 增加或减少。

---

我已经在网上搜索了一些解决方案：

首先：使用height: 100vh;

第二：作者Javascript（代码如下）

var vHeight = $(window).height(),
  header= $('.Header');

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

---

但它们都不适用于较小的屏幕尺寸。 Header 的高度大于屏幕尺寸。

---

总结：

主要问题：我怎样才能给一个元素分配一个高度，使得高度等于屏幕的高度（当时正在使用浏览网站）？

---

有人知道怎么做吗？

Answer 1

要获取屏幕的高度，您可以使用 Window.screen 对象，您可以在其中使用多个属性，例如 screen.height 和 screen.width。

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

let screenHeight = window.screen.height;

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

let yourElement = document.getElementById('elementsId');
yourElement.style.height = screenHeight;

编辑

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

let viewHeight = window.innerHeight;

这应该更适合您的媒体查询，尽管您可能需要调整几个像素。

---

使用硬编码的宽度和高度时要小心。它们可以在一种屏幕尺寸上看起来很棒，但会破坏所有其他尺寸。当响应性受到关注时，请尝试坚持基于百分比的大小调整并使用 box model 和 flexbox 之类的布局。

Answer 2

这不适合你吗？

html,
body {
  margin: 0;
  padding: 0;
}

.Header {
  height: 100vh;
  overflow: hidden;
  background-color: yellow; /* Just to show the area */
}

<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>
<p>This content is after the header</p>