<div> 高度全屏是指將某個頁面元素的高度充滿整個屏幕。在前端開發中，經常會遇到需要將某個<div>元素的高度設置為全屏的情況，例如實現全屏的背景圖、全屏的輪播圖或全屏的滾動效果等。接下來，我們將通過幾個代碼案例來詳細解釋如何實現<div>高度全屏的效果。
第一個案例是通過設置CSS的height屬性為100vh，vh是視口高度的單位，表示相對于視口高度的百分比。例如，設置一個<div>元素的高度為100vh，就表示該元素的高度等于當前窗口的高度。下面是一個示例代碼：

<pre>css
.fullscreen {
height: 100vh;
}

這段代碼中的fullscreen類用于指定需要設置為全屏高度的<div>元素。當你將該類應用到一個<div>元素上時，這個<div>元素的高度將會自動填充整個屏幕的高度。
第二個案例是使用JavaScript來動態計算<div>的高度。通過利用JavaScript的API來獲取當前窗口的高度，并將獲取到的高度賦值給<div>元素的高度。下面是一個示例代碼：

<pre>css
.fullscreen {
height: 100%;
}

javascript
window.onload = function() {
var fullscreen = document.querySelector('.fullscreen');
fullscreen.style.height = window.innerHeight + 'px';
}

在這個案例中，我們先將<div>元素的高度設置為100%。然后，通過window對象的innerHeight屬性獲取當前窗口的高度，并將獲取到的高度賦值給<div>元素的高度屬性。這樣，無論窗口的高度如何變化，都能保證<div>元素的高度始終與窗口的高度一致。
第三個案例是使用flex布局來實現<div>元素的高度全屏。通過將外層<div>元素設置為display: flex，并設置其子元素的flex屬性為1，可以實現子元素自動充滿整個父容器。下面是一個示例代碼：

<pre>css
.container {
display: flex;
}
<br>
.fullscreen {
flex: 1;
}

在這個案例中，我們將外層容器的display屬性設置為flex，這樣容器的子元素將會使用flex布局。然后，我們設置需要全屏的<div>元素的flex屬性為1，表示該元素會占據剩余空間，從而實現高度全屏的效果。
通過以上的代碼案例，我們可以看到實現<div>高度全屏的方法有多種，可以根據具體需求選擇最適合的方式來實現。無論是使用CSS的vh單位、JavaScript動態計算高度還是使用flex布局，都能實現<div>元素的高度全屏效果，使網頁更加美觀和精細。