css div撐滿窗口高度

Introduction:

介紹：

Hello there developers! Well, certainly if you are reading this article then that means that you have run into some trouble while creating your web page or website and if you are a beginner in this field, then there is no better place than this. So let us get started without further adieu. But before we can proceed forward with this article it is crucial to know that what are divs and what could be their possible uses.

您好，開發人員！ 好吧，當然，如果您正在閱讀本文，那么這意味著您在創建網頁或網站時遇到了麻煩，并且如果您是該領域的初學者，那么沒有比這更好的地方了。 因此，讓我們開始吧！ 但是在繼續本文之前，至關重要的是要知道什么是div以及它們的可能用途。

Definition and uses:

定義和用途：

Well, divs are something that we deal with regularly while developing a web page or website, the divs are used to group lines of texts or elements and anything similar, besides divs are also used to structure the code, so that various sections remain segregated from each other. Although you can make use of section tag both of them behave pretty similarly. Besides divs also help in declaring class and ids of the various elements. Therefore, in a nutshell, it would be right to say that divs are very essential when we are developing a website or web page and divs also help in keeping our code structured.

好吧，divs是我們在開發網頁或網站時經常處理的事情，divs用于對文本或元素行以及類似內容進行分組，此外divs還用于構造代碼，以便各個部分與彼此。 盡管您可以使用section標簽，但它們的行為都非常相似。 除了div之外，還有助于聲明各種元素的類和ID。 因此，總的來說，當我們開發網站或網頁時，div是非常重要的，而div也有助于保持代碼的結構化。

Solution:

解：

We have already seen by now how to set the height of the div elements using CSS height property? Now the question arises what if we want to set the height of the div 100% height of the window? here comes the answer to the solution that is using the vh property in CSS. We will discuss the vh property in detail in this article.

到目前為止，我們已經看到了如何使用CSS height屬性設置div元素的高度？ 現在出現了一個問題，如果我們想將div的高度設置為窗口高度的100％，該怎么辦？ 這是使用CSS中的vh屬性的解決方案的答案。 我們將在本文中詳細討論vh屬性。

Property:

屬性：

Here, "vh" stands for "viewport-height", and the word viewport refers to the user's browser windows size. So whenever we use the vh property, the element's height is adjusted relative to the height of the viewport.

在此， “ vh”代表“ viewport-height” ，而“ viewport”一詞指的是用戶瀏覽器窗口的大小。 因此，每當我們使用vh屬性時 ，元素的高度都會相對于視口的高度進行調整。

To set the height of div element to 100% height of the window, we can use the following syntax,

要將div元素的高度設置為窗口的100％高度 ，我們可以使用以下語法，

Syntax:

句法：

    element{
height:100vh;
}

Example:

例：

Output

輸出量

In the above example, it can be seen that by making use of the viewport-height property the height of the div element is 100% height of the window. Therefore, now you know both how to increase the height of the element as well as how to make it equivalent to 100% height of the window.

在上面的示例中，可以看到，通過使用viewport-height屬性，div元素的高度為window的100％高度 。 因此，現在您知道如何增加元素的高度以及如何使其等于窗口的100％高度。

This method proves to be very helpful, so just keep in mind that all you gotta do is make use of "vh" property and there you got it!

這種方法被證明是非常有用的，因此請記住，您要做的就是利用“ vh”屬性 ，您就已經掌握了！

翻譯自: https://www.includehelp.com/code-snippets/how-to-set-height-of-div-to-100-percentage-height-of-window-using-css.aspx

css div撐滿窗口高度