\<div> 最大高度是指一個 \<div> 元素的最大高度。在網頁布局中，我們經常會遇到需要限制某個元素的最大高度的情況，而 CSS 的方法之一就是使用 \<div> 元素的最大高度屬性。通過設置最大高度，我們可以控制元素的高度不會超過指定的大小，從而避免內容溢出或者破壞布局的問題。
下面通過幾個代碼案例來詳細說明 \<div> 最大高度的使用方法。
第一個案例是將一個圖片顯示在一個最大高度為300像素的容器中。代碼如下： \

\\<p>\<div style="max-height: 300px;">
\<img src="example.jpg" alt="example" />
\</div>\\

在這個案例中，我們使用了 \<div> 元素，并通過設置其最大高度為300像素，達到了控制圖片顯示范圍的目的。如果圖片的實際高度小于300像素，則顯示實際高度；如果圖片的實際高度大于300像素，則顯示300像素的高度，并顯示滾動條供用戶瀏覽。
第二個案例是使用 \<div> 最大高度實現一個自適應的文本容器。代碼如下： \

\\<p>\<div style="max-height: 200px; overflow: auto;">
\<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse nec turpis id lectus aliquet scelerisque. 
Maecenas id nisl ac purus malesuada congue.</p>
\</div>\\

在這個案例中，我們設置了一個最大高度為200像素的 \<div> 容器，并通過設置溢出屬性為auto，使得當文本內容超出容器的最大高度時，自動顯示滾動條供用戶瀏覽。這個方法可以有效避免文本內容溢出父容器造成頁面布局混亂的問題。
第三個案例是實現一個固定高度的導航欄，并通過 \<div> 最大高度來設置內容區域的最大高度。代碼如下： \

\\<p>\<div style="height: 80px;">
\<div style="max-height: calc(100% - 80px); overflow: auto;">
\<ul>
\<li>Home</li>
\<li>About</li>
\<li>Contact</li>
\<li>Blog</li>
\<li>Gallery</li>
\</ul>
\</div>
\</div>\\

在這個案例中，我們設置了一個固定高度的導航欄容器，高度為80像素。同時，我們通過設置內容區域的最大高度為父容器高度減去導航欄高度，即100% - 80px，并設置溢出屬性為auto，實現內容區域超出最大高度時自動顯示滾動條的效果。這樣就可以在固定高度的導航欄下展示大量的導航條目，而不會造成頁面布局錯亂或內容的遮擋。
通過以上幾個案例，我們可以看到 \<div> 最大高度的應用方法和效果。通過設置最大高度，我們可以控制元素的高度不會超過指定的大小，從而實現頁面布局的控制和優化。無論是圖片容器、文本容器還是導航欄，使用 \<div> 最大高度都可以有效地解決內容溢出和布局問題，提升用戶體驗和頁面整體美觀程度。