如何通过屏幕高度而不是浏览器高度设置高度答案

【问题标题】：How to set height by screen-height, not by browser-height如何通过屏幕高度而不是浏览器高度设置高度
【发布时间】：2017-11-09 05:44:29
【问题描述】：

如何设置 div 容器的高度，例如，它应该是屏幕高度的 60%？如果未调整浏览器窗口大小，则将 60% 设置为 css 中的高度可以正常工作。但是如果我缩小浏览器窗口，div 也会相应地缩小。 https://zurb.com 提供了一个很好的例子。无论浏览器窗口如何调整大小，“已完成任务”的灰色部分始终是相同的高度。如何确保这一点？我不想使用 px 来确保对 HiDpi 的支持。

谢谢，

【问题讨论】：

您必须使用 JS API 来获取屏幕高度，然后将其乘以您的百分比。
所以你想在页面第一次渲染时基本上保存屏幕高度，然后不管浏览器大小发生什么变化都保持这些精确的尺寸？是的，这需要 JS。
那个网站只是固定高度，与屏幕高度无关。
"我不想使用 px 来确保对 HiDpi 的支持。" px 工作正常，无论 DPI （它使用逻辑像素）。你不需要做任何事情。
@SLaks：谢谢，我猜是这样，但不知道逻辑像素在分辨率差异很大的情况下也能正常工作！这对我有帮助，

标签： css position height

【解决方案1】：

这是一个简单的固定高度元素；它与屏幕大小无关。

您应该只使用px 而不必担心任何事情； px 表示逻辑像素，适用于任意 DPI。

【讨论】：

非常感谢，不知道 px 在任意 DPI 上都能正常工作。

【解决方案2】：

虽然相关页面只是为相关元素使用了固定高度（px），这意味着它始终具有相同的高度（并且不会是60%高度与视口高度无关）。为了使元素与视口相关，您正在寻找 viewport-sized typography。

要根据高度进行调整，您需要查找 CSS 单元 vh，它告诉相关元素根据视口高度进行缩放。您还可以使用vw 根据视口宽度进行缩放。

请记住，<body> 的默认值为 margin: 8px，因此如果您想在使用视口大小的排版时避免滚动条，您还需要将其覆盖回 0。

body {
  margin: 0;
}

div {
  height: 60vh;
  width: 100vw;
  background: red;
}

&lt;div&gt;&lt;/div&gt;

有关 CSS 单元的更深入信息，我建议您查看 this guide。

希望这会有所帮助！ :)

【讨论】：

感谢您的回答，但这不是我想要的。当你全屏运行 sn -p 并调整窗口大小时，你的红色框也会调整大小。
视口不是屏幕。
@j.Doe：是的；你只需要px 的固定高度。
视口<meta> 限制了 DPI 问题，并且您说您希望元素的高度为屏幕高度的 60%，这需要视口大小的排版。使用固定高度 (px) 将使其不管屏幕尺寸的高度相同（这意味着它不会总是60%）。