<\p>div 全稱為 division，是 HTML 中的一個元素標簽，用于將文檔分成若干獨立的部分。在前端開發中，div 元素經常被用來作為網頁布局的基礎。通過設置 div 的寬度和高度，我們可以控制 div 的大小。而設置 div 的寬度和高度為 100% 即可實現 div 元素的全屏展示。接下來，我將通過幾個具體的代碼案例來詳細解釋說明。<\p>
<\p>1. 設置 div 的寬度和高度為 100%：<\p>
<\pre> <\code> div { width: 100%; height: 100%; } <\code> <\pre>
<\p>在這個案例中，我們通過 CSS 的樣式設置了 div 元素的寬度和高度均為 100%。這樣，div 元素將占據整個父元素的寬度和高度，實現了全屏展示的效果。<\p>
<\p>2. 使用 vh 和 vw 單位設置 div 的寬度和高度：<\p>
<\pre> <\code> div { width: 100vw; height: 100vh; } <\code> <\pre>
<\p>vh 和 vw 是 CSS3 中新增的單位，分別代表視口的高度和寬度。設置 div 的寬度和高度為 100vw 和 100vh，即使得 div 元素的大小隨著視口的變化而自適應，實現全屏展示的效果。<\p>
<\p>3. 結合 JavaScript 設置 div 的寬度和高度：<\p>
<\pre> <\code> window.onload = function() { var div = document.getElementById("myDiv"); div.style.width = window.innerWidth + "px"; div.style.height = window.innerHeight + "px"; } <\code> <\pre>
<\p>這個案例中，我們利用 JavaScript 在頁面加載完成后獲取到 div 元素，并使用 window.innerWitdh 和 window.innerHeight 屬性獲取到視口的寬度和高度，然后將其賦值給 div 元素的寬度和高度。這樣，div 元素的大小將會與視口的大小保持一致，實現全屏展示的效果。<\p>
<\p>綜上所述，通過設置 div 元素的寬度和高度為 100%、100vw 和 100vh，或者結合 JavaScript 獲取視口的寬度和高度賦值給 div 元素，我們可以實現 div 元素的全屏展示效果。在前端開發中，掌握這些技巧可以幫助我們更好地實現網頁布局和響應式設計。<\p>