在css中，可以利用max-height屬性來設定div的最大高度，該屬性的作用就是設定元素的最大高度，只需要給div元素新增「div{max-height:最大高度值;}”樣式即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中，可以利用max-height屬性來設定div的最大高度。
max-height 屬性設定元素的最大高度。注意： max-height屬性不包括填充，邊框，或頁邊距！
範例：
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid red;
margin-bottom: 20px;
}
.box1{
overflow: hidden;
}
.box2{
max-height: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,</div>
<div class="box2">
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,</div>
</body>
</html>效果圖：
#可以看出，div.box1元素的高度是隨著元素內容高度變化的；而div.box2元素在最大高度不超過50px時，也是隨著元素內容高度變化的，但一旦超過，就不會變化，超過的元素會被隱藏。
（學習影片分享：css影片教學）
以上是css怎樣設定div的最大高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
每周平台新聞：Galaxy Store的Web應用程序，Tappable Stories，CSS SubgridApr 14, 2025 am 11:20 AM在本週的綜述中：Firefox獲得了類似鎖匠的力量，三星的Galaxy Store開始支持Progressive Web Apps，CSS Subgrid正在Firefox發貨
每周平台新聞：Internet Explorer模式，搜索控制台中的速度報告，限制通知提示Apr 14, 2025 am 11:15 AM在本週的綜述中：Internet Explorer進入Edge，Google搜索控制台吹捧新的速度報告，而Firefox給出了Facebook＆＃039; s Notification
使用Gatsby組織和準備圖像以使圖像模糊效果的方法Apr 14, 2025 am 10:56 AM蓋茨比（Gatsby）進行了出色的處理和處理圖像。例如，它可以幫助您節省圖像優化的時間，因為您不必手動
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
Dreamweaver CS6
視覺化網頁開發工具
WebStorm Mac版
好用的JavaScript開發工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
禪工作室 13.0.1
強大的PHP整合開發環境
