<div 100% 高的完整解釋
在網頁設計中，我們經常會遇到需要將某個元素的高度設置為100%的情況。當我們希望一個div元素的高度始終與其父元素保持一致時，我們可以使用CSS屬性來實現這一效果。在本文中，我們將詳細討論如何使用div 100% 高來實現這一目標，并提供幾個代碼案例來說明其使用方法。
<div 100% 高的基本用法
，讓我們來看一個基本的例子。假設我們有一個包含兩個div元素的容器，我們希望第一個div元素的高度始終與該容器的高度保持一致。我們可以使用以下代碼實現這一效果：

HTML 代碼：

<div class="container">
<div class="child">內容</div>
<div class="child">內容</div>
</div>

CSS 代碼：

.container {
height: 300px;
display: flex;
flex-direction: column;
}
<br>
.child {
height: 100%;
}

通過將容器的高度設置為300像素，并為子元素設置高度為100%，第一個div元素的高度將與容器保持一致。這樣，無論我們如何更改容器的高度，第一個div元素的高度都將自動調整以適應容器。
使用 div 100% 高調整子元素的高度
除了讓子元素的高度與容器保持一致外，我們還可以使用div 100% 高來調整子元素的高度，以使其在不同的布局下得到適當的顯示。
考慮一個常見的場景：我們希望在頁面的頭部和底部放置一些導航欄和頁腳內容，并在中間放置主要的內容區域。我們可以使用以下代碼實現這一效果：

HTML 代碼：

<div class="header">頭部</div>
<div class="content">內容</div>
<div class="footer">頁腳</div>

CSS 代碼：

.header, .footer {
height: 50px;
}
<br>
.content {
height: calc(100% - 100px);
}

在這個例子中，我們將頭部和頁腳的高度設置為50像素，然后通過將內容區域的高度設置為100%減去頭部和頁腳的高度，實現了內容區域與頁面剩余空間高度保持一致的效果。
綜合應用：div 100% 高實現響應式布局
最后，我們來看一個綜合應用的例子，使用div 100% 高實現一個簡單的響應式布局。在這個例子中，我們將使用媒體查詢（media queries）和百分比寬度來實現一個頁面布局，在不同的屏幕寬度下，顯示不同數量的列。

HTML 代碼：

<div class="container">
<div class="column">列1</div>
<div class="column">列2</div>
<div class="column">列3</div>
<div class="column">列4</div>
</div>

CSS 代碼：

.container {
display: flex;
flex-wrap: wrap;
}
<br>
.column {
width: 25%;
height: 100%;
}
<br>
@media (max-width: 768px) {
.column {
width: 50%;
}
}
<br>
@media (max-width: 480px) {
.column {
width: 100%;
}
}

在這個例子中，我們將容器的寬度設置為固定的100%。然后，我們將每列的寬度設置為25%。在屏幕寬度小于等于768像素時，我們將每列的寬度調整為50%，在屏幕寬度小于等于480像素時，我們將每列的寬度調整為100%。這樣，我們就實現了一個簡單的響應式布局，頁面的列數根據屏幕寬度的不同而發生變化。
在本文中，我們討論了如何使用div 100% 高來實現在網頁設計中常見的需求，使元素的高度始終與其父元素保持一致。我們提供了幾個代碼案例來說明其使用方法，并參考了其他文章中的真實案例。通過靈活運用div 100% 高，我們可以更好地控制網頁布局和響應式設計。希望本文能對你理解和應用div 100% 高有所幫助。