如何將元素設置為屏幕大小但不再調整大小？

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 。