如何将元素设置为屏幕大小但不再调整大小？

Question

参考： http ： //www.templatewire.com/preview/landscaper/

我想制作一个网页，在那个页面中，我希望每个屏幕大小都有div /节。

现在，我的意思是，显示器的宽度和高度，它不会再次调整大小，并且将保持该显示器的宽度和高度，无论浏览器大小如何，并且无论内部有多少内容。

链接显示我的意思，但我有一个1920x1080的浏览器窗口，你可以看到它上面和下面部分的顶部和底部。 如果显示器非常大，我不希望看到相邻部分的顶部和底部，如果显示器太小，我也不希望该部分不完全可见。

例如，我在参考文献中有5个部分，我的浏览器窗口是1920x1080，该文档的整体高度为1920 * 5400。

（我希望它是屏幕的高度减去导航栏上的高度。）

Answer 1

您可以使用Viewport单位（浏览器窗口大小）。 100vh是屏幕的高度。 如果你得到的部分大于小屏幕的高度，你可以使用min-height属性并将其设置为100vh。

由于您没有放置代码，这通常是用例的示例：

section { min-height: 100vh;}

在这里阅读更多内容： https ： //developer.mozilla.org/en-US/docs/Web/CSS/length

祝好运！

Answer 2

看来你正在寻找视口百分比长度 。

要在CSS中为任何元素提供当前视口的高度，应使用：

your-selector {
  height: 100vh;
  display: block;
} 

如果元素是<div>或具有默认值block任何其他元素用于display ，则显然不需要第二个规则。

看它工作：

 your-selector { height: 100vh; display: block; transition: background-color .3s linear; } /* let's add a hover, for testing */ your-selector:hover { background-color: red; } body { margin: 0; min-height: 200vh; } 

 <your-selector>Test</your-selector> 

注意：您还可以将视口百分比长度应用于其他属性，例如min-height ， max-height等...

注意：虽然默认视口是浏览器窗口，但可以更改。 例如，3d变换将任何常规DOM元素转换为其子项的视口，影响视口百分比长度的行为，以及position:fixed行为position:fixed在其任何子项中position:fixed 。