<div> 高100%是一種常用的CSS布局技術，它可以使一個<div>元素的高度自動擴展以適應其內容或其父元素的高度。這種技術在設計響應式網頁時特別有用，因為它可以根據不同設備的屏幕尺寸自動調整元素的高度，為用戶提供更好的閱讀體驗。
下面我們將通過幾個代碼案例來詳細解釋<div>高100%的功能和用法。
在第一個代碼案例中，我們將使用以下代碼來創建一個簡單的<div>元素，并將其高度設置為100%。

<p></style></p>
<p></head></p>
<p></body></p>
<p><div style="height: 100%;"></div></p>
<p><script><br>
// 這里是JavaScript代碼塊，可以在需要的時候使用
</script></p>

在這個例子中，我們通過在<div>元素的style屬性中設置"height: 100%;"來實現其高度為100%。這意味著<div>元素的高度將自動調整為其父元素的高度。
在第二個代碼案例中，我們將展示如何使用<div>高100%來創建一個帶有固定頁眉和頁腳的網頁布局。

<p></style></p>
<p></head></p>
<p></body></p>
<p><div style="height: 100%;"></p>
<p style="height: 50px; background-color: #f8f8f8;"></p>
<p style="height: calc(100% - 100px);"></p>
<p style="height: 50px; background-color: #f8f8f8;"></p>
<p></div></p>
<p><script><br>
// 這里是JavaScript代碼塊，可以在需要的時候使用
</script></p>

在這個例子中，我們使用了三個<div>元素來創建頁面的頁眉、主體和頁腳部分。通過將頁眉和頁腳的高度設置為固定值，然后將主體部分的高度設置為"calc(100% - 100px);"，我們可以實現一個固定頁眉和頁腳的布局。
在第三個代碼案例中，我們將展示如何在一個<div>容器中創建多個內容塊并讓它們的高度自動適應父元素的高度。

<p></style></p>
<p></head></p>
<p></body></p>
<p><div style="height: 100%; display: flex;"></p>
<p style="flex: 1;"></p>
<p style="flex: 2;"></p>
<p style="flex: 1;"></p>
<p></div></p>
<p><script><br>
// 這里是JavaScript代碼塊，可以在需要的時候使用
</script></p>

在這個例子中，我們使用了"display: flex;"來將<div>容器中的元素設置為彈性布局。通過給這些元素設置不同的"flex"屬性值，我們可以讓它們的高度自動適應父元素的高度，并且按照指定的比例進行分配。
通過以上幾個代碼案例，我們可以看到<div>高100%在網頁布局中的強大功能。無論是創建響應式網頁、固定頁眉和頁腳的布局，還是創建自適應的內容塊布局，都可以通過<div>高100%輕松實現。這種技術為網頁設計者提供了更多的靈活性和自由度，使他們能夠更好地控制網頁布局和用戶體驗。在今后的網頁設計和開發中，我相信<div>高100%將會繼續發揮重要的作用。