深入理解CSS min-height：大幅提高頁面布局的自適應性

CSS min-height屬性定義元素最小高度。與height屬性的不同在於，如果一個元素的高度小於min-height所設置的值，元素會繼續增高以達到這個最小高度。

一、CSS min-height的基礎應用

1.1 設置元素最小高度

  
.container {
  min-height: 500px;
}
  

在上述示例中，.container元素的最小高度為500px。

1.2 使用百分比設置最小高度

  
.container {
  min-height: 50%;
}
  

使用百分比設置min-height時，其值計算方式與height屬性類似，將相對於父元素的高度。

二、CSS min-height優化頁面布局

2.1 避免內容溢出

在Web開發中，我們經常會遇到一些內容高度未知的元素在渲染時會導致布局失真的情況。CSS min-height屬性能夠很好地解決這一問題。

2.2 布局兩欄等高

  
.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
  min-height: 500px;
}
  

在上述示例中，.left和.right子元素均設置了flex:1，使其佔據剩餘的空間，而.right元素的min-height為500px，則.right元素的高度最小為500px，以此使兩欄元素等高。

2.3 充分利用視口的高度

  
html, body {
  height: 100%;
}

.container {
  min-height: 100%;
}
  

在上述示例中，我們將和設置為100%的高度，以便告訴瀏覽器我們希望容器充滿整個視口。接著，我們給容器設置了min-height:100%，這樣即使頁面沒有足夠的內容，容器也能佔據整個視口高度。

三、CSS min-height典型用例

3.1 骨架屏(Skeleton Screen)

骨架屏是一種通過先載入頁面骨架結構，再填充數據的方式，讓用戶能夠更快地感受到頁面的反饋。CSS min-height可用於骨架屏中的基礎容器高度。

3.2 底部居底

  
html, body {
  height: 100%;
}

.container {
  min-height: calc(100% - 100px);
}

.footer {
  height: 100px;
}
  

在上述示例中，我們先通過設置html和body的高度為100%來讓.container元素充滿視口高度。而.footer元素的高度為100px，則.container元素的min-height為視口高度減去.footer的高度。這樣使得.footer元素能夠固定在窗口底部，而.container元素則充滿其他地方。

3.3 響應式布局

  
.container {
  min-height: calc(100vh - 64px);
}
  

在上述示例中，我們計算出視口高度減去頂部導航欄的高度，以此得到了容器元素的min-height，從而實現了一個響應式布局。

四、總結

CSS min-height屬性是實現頁面自適應最常用的屬性之一，它能夠很好地幫助我們解決不同頁面布局的問題。仔細理解其使用方式，我們可以更加自如地控制頁面布局。