CSS Max Height

一、什麼是CSS Max Height？

CSS Max Height用於設置元素的最大高度。當元素的內容高度超過了最大高度，元素的高度將會被限制在最大高度的範圍之內。比如，設置了max-height:200px的元素，當內容高度超過200px時，元素高度將不再增加。

二、如何使用CSS Max Height？

CSS Max Height可以直接在元素的樣式中設置，格式如下：

selector {
    max-height: value;
}

其中，selector為需要設置最大高度的元素選擇器，value為最大高度值，可以為px、em、rem、%等單位。

下面是一個例子，使用CSS Max Height限制一個元素的最大高度為200px：

<style>
    .box {
        max-height: 200px;
    }
</style>
<div class="box">
    <p>這是一個很高的div</p>
    <p>這是一個很高的div</p>
    <p>這是一個很高的div</p>
    <p>這是一個很高的div</p>
</div>

當內的內容高度超過了200px時，元素的高度將會被限制在200px範圍內。

三、CSS Max Height的注意事項

1、CSS Max Height會影響元素的布局

當使用CSS Max Height設置元素的最大高度時，元素的高度將會受到限制。當元素內容高度超過最大高度時，元素的高度不再增加，因此，可能會導致元素的內容被截斷。這會影響元素的布局，可能會影響頁面的其他元素的位置和布局。

2、CSS Max Height不支持百分比值

在CSS中，max-height可以設置為一個具體的高度值，比如px、em、rem等單位，但不支持百分比值。因此如果需要針對不同屏幕尺寸設置不同的最大高度，就需要使用@media查詢來實現。

下面是一個使用@media查詢設置最大高度的例子：

<style>
    .box {
        height: 100%;
    }
    
    .box-content {
        max-height: 200px;
        overflow-y: auto;
    }
    
    @media (min-width: 1024px) {
        .box-content {
            max-height: 350px;
        }
    }
</style>
<div class="box">
    <div class="box-content">
        <p>這是一個很高的div</p>
    </div>
</div>

在上面的例子中，我們給一個容器元素設置了100%的高度，然後給內部的內容容器元素設置了最大高度200px，並且設置了overflow-y:auto屬性，使得當內部內容超過200px高度時，會自動出現垂直滾動條。然後使用@media查詢，給大屏幕設備設置了最大高度為350px，從而兼容不同屏幕尺寸的需求。

3、CSS Max Height和CSS Height

在使用CSS Max Height時，需要注意它和CSS Height的區別。Height用於設置元素的固定高度，而CSS Max Height用於限制元素的最大高度，並不會影響元素的最小高度。因此，在使用CSS Max Height時，需要考慮元素的最小高度，避免內容超出最小高度範圍。

四、總結

CSS Max Height是一個非常有用的CSS屬性，可以用於限制元素的最大高度，避免元素高度超出可視範圍。使用CSS Max Height時需要注意需要考慮元素的最小高度、會影響元素的布局、不支持百分比值等特點。