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 高度屬性參數值
寬度值語法說明
autoheight:auto;
讓瀏覽器自動判斷網頁元素的高度。
長度height:數字+單位;
可接受的單位有 px, em, cm 等網頁標準單位。
%height:數字%;
利用百分比設定網頁元素高度,需要有比較的參考。
inheritheight: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 圖片標籤

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C