CSS min-height 屬性

CSS min-height 屬性的功能是用來設定網頁元素的最低高度限制,例如圖片的最低高度、DIV 區塊的最低高度或是一個段落的最低高度,都可以用 CSS min-height 屬性來設定,有的時候,網頁中的元素大小會隨著網頁本身的條件而改變,高度也會因此而改變,我們可以用 CSS min-height 屬性來限制某個元素的最小高度,目前所有主流的瀏覽器都支援 CSS min-height 屬性的效果。

CSS min-height 屬性語法
min-height:高度值;
CSS min-height 屬性可以自定網頁元素的最小高度(使用通用單位如:px, em, cm ... 等)或是用百分比決定最小高度,不能設定負值。另外,雖然 CSS min-height 屬性有 inherit 屬性值,不過 IE 瀏覽器並不支援 CSS min-height 屬性的 inherit 屬性值,所以不建議使用。

CSS min-height 屬性範例:設定圖片的最低高度
這是原始圖片<br><img src="upload/20141007145509.png" style="height:auto;"><br><br>
這是設定 min-height 屬性的圖片<br><img src="upload/20141007145509.png" style="min-height:100px;">
範例輸出效果
這是原始圖片


這是設定 min-height 屬性的圖片
範例總共有兩張圖片,第一張圖片設定「height:auto;」讓瀏覽器判斷出原始圖片的大小,高度為 80px,第二張圖片利用 CSS min-height 屬性將最小高度設為 100px,整張圖片等比例被放大了一些,因為我們強制讓圖片的高度至少要有 100px,比原本的高度要高出一些,所以圖片就會自動變大張囉!這就是 CSS min-height 屬性的基本用法,另外,除了用固定的高度之外,百分比也是相當普遍的應用。

與 CSS min-height 屬性相對應,用來設定最大高度的是:CSS max-height 屬性

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