CSS height 高度屬性

CSS height 高度屬性顧名思義，就是用來控制網頁元素高度的一個標準屬性，網頁設計師常常會使用 CSS height 屬性來調整 DIV 區塊的高度、圖片的高度、表格的高度或者是文字輸入欄位的高度，這些 height 屬性都可以透過數字以及單位的調整，來決定最終要顯示出來的高度，使用 CSS height 屬性也常與設計寬度用的 width 寬度屬性搭配設計。所有我們常用的主流瀏覽器都支援 CSS height 屬性的效果，除此之外，CSS 也推出了更進階的 min-height, max-height 屬性，來增加載網頁元素高度設計上的彈性變化。

CSS height 高度屬性語法

height: 高度參數值;

CSS height 屬性僅需要設定高度參數值即可使用，常用的參數值整理於下表：

CSS height 高度屬性參數值

寬度值	語法	說明
auto	height:auto;	讓瀏覽器自動判斷網頁元素的高度。
長度	height:數字+單位;	可接受的單位有 px, em, cm 等網頁標準單位。
%	height:數字%;	利用百分比設定網頁元素高度，需要有比較的參考。
inherit	height:inherit;	繼承自父層的高度屬性值。

最後一個 inherit 屬性值在 IE 瀏覽器並不支援，不建議使用。

CSS height 屬性範例一、調整 DIV 區塊的高度

<div style="border:1px green solid;">這是未設定 height 屬性的預設高度</div>
<div style="border:1px green solid;height:100px;">這是將 height 屬性設定為 100px 的高度</div>

範例輸出結果

這是未設定 height 屬性的預設高度

這是將 height 屬性設定為 100px 的高度

我們在範例一準備了兩個綠色邊框的 DIV 區塊，第一個 DIV 區塊沒有使用 height 屬性，所以 DIV 區塊內的文字占用多少高度，DIV 區塊看起來就是那樣的高度，第二個區塊則使用了 CSS height 將高度設為 100px，很明顯的比第一個區塊高出許多。

參考資料：CSS border 邊框、CSS DIV 區塊標籤的使用教學

CSS height 屬性範例二、調整表格欄位高度

<table border="1">
<tr><td>預設表格欄位高度</td></tr>
<tr><td style="height:100px;">透過 height 屬性調整過後的欄位高度</td></tr>
</table>

範例輸出結果

預設表格欄位高度

透過 height 屬性調整過後的欄位高度

範例二所呈現的是一個有兩欄位的表格（Table），上面的欄位是預設高度，也就是欄位內容占用多少高度，欄位就會呈現出多少高度，下面的欄位則是有透過 CSS height 屬性調整的欄位，無論表格欄位內容有多少文字，至少都會有 100px 的高度。

參考資料：HTML table 表格

CSS height 屬性範例三、調整圖片高度

原始圖片：<img src="upload/20141007145509.png" style="height:auto;"><br><br>
修改圖片：<img src="upload/20141007145509.png" style="height:120px;">

範例輸出結果

原始圖片：

修改圖片：

範例三利用 CSS height 屬性來調整圖片的高度，第一張圖片使用「height:auto;」讓瀏覽器自動判斷圖片的原始高度，我們所採用的範例圖片高度是 80px，第二張圖片則是使用「height:120px;」強制將圖片的高度調整為 120px，寬度則自動以等比例放大，所以輸出結果會比原始圖片還要大張的感覺，因為長寬都被放大了。

參考資料：HTML img 圖片標籤

延伸閱讀