<div height 100>是一個在網頁開發中常用的CSS屬性，用于設置一個元素的高度為100%。這意味著該元素的高度將鋪滿其父元素所占用的空間。這種設置非常實用，可以用于創建響應式的布局，使元素自動適應不同屏幕尺寸和設備。接下來，我們將通過幾個代碼案例詳細解釋<div height 100>的用法。

例1: 在父元素為固定高度的情況下使用<div height 100>

.parent {
height: 400px;
}
<br>
.child {
height: 100%;
}

在這個例子中，父元素的高度被設置為固定的400像素。子元素的高度使用<div height 100>，即設置為100%。這樣，無論父元素的高度如何變化，子元素都將始終鋪滿父元素所占據的空間。這對于創建響應式的布局非常有用，因為子元素能夠自動適應不同設備的高度。

例2: 使用<div height 100>創建全屏背景圖像

.background-image {
height: 100vh;
background-image: url("image.jpg");
background-size: cover;
background-position: center;
}

在這個例子中，我們將一個背景圖像設置為鋪滿整個屏幕。通過使用<div height 100>和CSS中的視口高度單位（vh），我們將背景圖像的高度設置為100%的視口高度。這樣，無論設備的屏幕尺寸如何變化，背景圖像都將完全填充屏幕。還可以使用其他CSS屬性來調整圖像的顯示方式，例如background-size和background-position。

例3: 使用<div height 100>實現垂直居中

.container {
height: 100vh;
display: flex;
align-items: center;
}
<br>
.content {
margin: auto;
}

在這個例子中，我們將一個容器元素的高度設置為100%的視口高度，并利用CSS中的Flex布局將內容元素垂直居中。通過使用<div height 100>和align-items: center屬性，我們可以讓內容元素自動位于容器元素的垂直中心位置。這對于實現垂直居中的布局非常有用，無論內容元素的高度如何變化，都能夠保持在垂直居中的狀態。

起來，<div height 100>是一個非常實用的CSS屬性，可以幫助我們快速實現元素的自適應布局、全屏背景圖像和垂直居中等效果。通過上述幾個代碼案例，我們詳細介紹了<div height 100>的使用方法和效果。在實際開發中，我們可以根據具體需求靈活運用這個屬性，為網頁提供更好的用戶體驗。