CSS的max-height屬性控制元素最大高度

一、max-height屬性的基礎介紹

大多數開發者對於CSS的height屬性應該都非常熟悉，它可用於設置元素的高度。但是，height屬性只能控制元素的確切高度值，而無法設置最大高度值。這時max-height屬性就應運而生了。

max-height屬性可以用於設置元素的最大高度值，超出這個高度值後，元素的高度將不再繼續增加。

max-height: 200px; /*設置元素的最大高度值為200像素*/

二、如何使用max-height控制文本框的顯示區域

max-height屬性常常用於控制文本框的顯示區域大小。在實際開發中，經常出現需要固定文本框的高度，同時當文本框內的內容超出固定高度時，顯示滾動條。

這時候，就可以使用max-height屬性。首先，需要將文本框的高度設置為固定值，然後設置max-height屬性為略大於固定高度值的數值即可。

.text-box{
    height: 100px; /*設置文本框的高度為100像素*/
    max-height: 105px; /*設置文本框的最大高度為105像素*/
    overflow: auto; /*當內容超出文本框高度時，出現滾動條*/
}

三、如何使用max-height控制圖片大小

常見的圖片大小控制方法是使用width和height屬性設置固定的寬度和高度值，但是這種方式可能會導致圖片失真和拉伸。如果不知道圖片的確切大小，最好的辦法是使用max-width和max-height屬性設置最大寬度和最大高度值。

以圖片高度為例，設置max-height屬性可以確保在圖片高度超出預設值時，圖片不會失真和變形。

img{
    max-height: 200px; /*設置圖片的最大高度為200像素*/
}

四、如何使用max-height控制動態內容區域

動態內容區域是指內容高度隨輸入內容的增加和減少而動態變化的區域，例如留言板、評論區等。在這種情況下，max-height屬性可以非常有效地控制內容區域的最大高度。

需要設置內容區域的高度為auto。這樣，內容區域的高度將隨著輸入內容的增加和減少自動調整。同時，使用max-height屬性設置內容區域的最大高度，保證當內容過多時，不會撐破頁面。

.content{
   height:auto; /*設置內容區域的高度為auto*/
   max-height: 300px; /*設置內容區域的最大高度為300像素*/
   overflow-y: auto; /*當內容超出內容區域高度時，出現滾動條*/
}

五、max-height屬性和媒體查詢配合使用

max-height屬性還可以與媒體查詢（@media）配合使用，用於在不同顯示尺寸下控制元素的最大高度。

例如，在手機屏幕大小下，為保證頁面排版整齊，可以使用max-height屬性控制圖片在頁面中的最大高度值：

@media(max-width: 768px){ /*當屏幕寬度小於768像素時*/
   img{
       max-height: 200px; /*設置圖片的最大高度為200像素*/
   }
}

總結

max-height屬性可用於控制元素的最大高度，是一個非常常用的CSS屬性，在各種案例中都有廣泛應用。需要注意的是，在與媒體查詢配合使用時，可以根據不同的顯示尺寸設置不同的最大高度值。