html - 如何根据屏幕高度调整div

Question

我目前正在开发一个软件，我有一个关于该软件的 page wrapper div 的小问题。现在我想要的是根据打开它的屏幕高度调整 div 的高度。

我尝试使用 percentage(%) 设置高度，但当打开到屏幕尺寸不同的其他计算机时仍然无法正常工作。

如果我无法为您提供一些图片，我很抱歉，因为我没有足够的声誉来附加一些。

非常感谢任何建议。谢谢

Answer 1

你可以使用vh。

100vh 是屏幕的高度，您可以使用 vh 更改相对于屏幕高度的元素的高度。

One unit of the vh is 1% of the viewport height. "Viewport" == browser window size == window object. If the viewport is 40cm height, 1vh == 0.4cm.

演示

div {
  height: 50vh;
  width: 50vw;
  background: yellow;
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam unde soluta ex beatae reprehenderit ab repellat nostrum maxime in enim. Enim, reiciendis ducimus eligendi quam iure eius voluptatibus provident facilis?</div>

Docs

阅读更多:https://css-tricks.com/viewport-sized-typography/