<div 高度比例是指在Web開發中，使用css屬性設置一個div元素的高度相對于其父元素的比例。這種技術可以幫助我們實現響應式設計和適應不同屏幕尺寸的需求。

下面是幾個例子來解釋如何使用div高度比例。

案例1：

假設我們有一個父元素div，高度為500像素。我們想要在父元素中創建一個子元素div，使其高度占父元素的50%。可以通過設置子元素的高度為50%來實現這一目標。下面是代碼示例：

<div style="height:500px;">
<div style="height:50%;"></div>
</div>

案例2：

我們可以使用CSS的calc()函數來進行更加靈活的高度比例設置。假設我們有一個父元素div，高度為800像素。我們想要在父元素中創建兩個子元素div，第一個子元素的高度占父元素的60%，第二個子元素的高度占父元素的40%。可以使用calc()函數來計算高度值。下面是代碼示例：

<div style="height:800px;">
<div style="height:calc(60% - 10px);"></div>
<div style="height:calc(40% - 10px);"></div>
</div>

案例3：

有時候，我們可能需要在一個父元素中放置多個子元素，而每個子元素的高度比例需要根據內容區域的實際大小進行自動分配。可以使用flexbox布局來實現這一目標。下面是一個示例：

<div style="display: flex; flex-direction: column; height: 500px;">
<div style="flex-grow: 1;">內容區域1</div>
<div style="flex-grow: 2;">內容區域2</div>
<div style="flex-grow: 1;">內容區域3</div>
</div>

以上是幾個關于div高度比例的案例說明。通過設置div元素的高度比例，我們可以更好地控制和適應頁面布局，在不同屏幕尺寸下呈現出更好的用戶體驗。