設定元素矩形格子的高。可以用 width 設定矩格的寬。
設定元素的高度，不可為負值。min-height, max-height 會改寫 height。可設為：
- 長度：用長度設定元素的高度。
- 百分比：相對於包納區塊（containing block）高度的百分比，也就是父元素的高度。如果包納區塊的高度沒有宣告，而是由內容決定其高度，則此參數與 auto 相同。
- auto：依據其它特徵決定高度，此為預設值。
- inherit：繼承父元素特徵。
- 風格用法：
<div style='height: 300px; width: 300px; background:white'>
<p style='height: 70%; width: 70%; background:#733; overflow:auto'>
John F. Kennedy said:ask not what your country can do for you -
ask what you can do for your country.
</p>
</div> - 執行結果：
John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country.
設定元素的最大高度，不可為負值。max-height 與 height 的不同組合，會有不同的效果。
- height 大於 max-height 時，會展現 max-height 的高度。
- height:auto 時，會展現內容的高度，但是不會超過 max-height。
- height 小於 max-height 時，會展現 height 的高度，並且高度固定。
此特徵的值可設為：
- 風格用法：
<p style='max-height: 80px; height: 120px;
width: 200px; background:#733'>
max-height: 80px; height: 120px;
</p>
<p style='max-height: 80px; height: auto;
width: 200px; background:#733'>
max-height: 80px; height: auto;
</p>
<p style='max-height: 80px; height: auto;
width: 200px; background:#733'>
max-height: 80px; height: auto;<br />
height:auto 時，會展現內容的高度，但是不會超過 max-height。
</p>
<br /><br /><br />
<p style='max-height: 120px; height: 80px;
width: 200px; background:#733'>
max-height: 120px; height: 80px;<br />
height 小於 max-height 時，會展現 height 的高度，並且高度固定。
</p> - 執行結果：
max-height: 80px; height: 120px;
max-height: 80px; height: auto;
max-height: 80px; height: auto;
height:auto 時，會展現內容的高度，但是不會超過 max-height。
max-height: 120px; height: 80px;
height 小於 max-height 時，會展現 height 的高度，並且高度固定。
- IE6 無此項；Firefox, Safari, Chrome 有支援。
CSS hack max-height。IE6 沒有 max-height，可以利用 expression() 與 clientHeight 達成 max-height 的功能。expression() 限用於 IE6, IE7。下例中
- IE6 不認得 max-height：該行會被 IE6 忽略；IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
- IE8, Firefox, Safari, Chrome 不認得 expression()，該行會被忽略。
- 風格用法：
<style type='text/css'>
.hackx {max-height: 100px;
height:expression( this.clientHeight > 100 ? 100 : auto );
width:100px;
background:#339;
overflow:auto;
}
</style>
<p class='hackx'>
好玩遊戲
</p>
<p class='hackx'>
好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲
</p> - 執行結果：
好玩遊戲
好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲
- 上例中，必須加上 overflow:auto，否則 IE6 會擴張高度。這與真正的 max-height 有差異。
設定元素的最小高度，不可為負值。min-height 與 height 的不同組合，會有不同的效果。
- 元素矩格先以 min-height 展現其高度。
- 如果 height 的值大於 min-height，則展現 height 的高度，且高度固定。
- 如果內容超過 min-height，且 height:auto，則會擴展高度。
- 如果內容超過 min-height，且 height 不是設設為 auto，則高度固定。
- 風格用法：
<p style='min-height: 80px; height:auto;
width: 200px; background:#733'>
min-height: 80px; height:auto
</p>
<p style='min-height: 80px; height:auto;
width: 200px; background:#733'>
min-height: 80px; height:auto<br />
如果內容超過 min-height，且 height:auto，則會擴展高度。
</p>
<p style='min-height: 80px; height:40px;
width: 200px; background:#733'>
min-height: 80px; height:40px;<br />
如果內容超過 min-height，且 height 不是設設為 auto，則高度固定。
</p>
<br /><br /><br /><br />
<p style='min-height: 80px; height:120px;
width: 200px; background:#733'>
min-height: 80px; height:120px;
<br />height > min-height，則展現 height 的高度，且高度固定。
</p> - 執行結果：
min-height: 80px; height:auto
min-height: 80px; height:auto
如果內容超過 min-height，且 height:auto，則會擴展高度。min-height: 80px; height:40px;
如果內容超過 min-height，且 height 不是設設為 auto，則高度固定。
min-height: 80px; height:120px;
height > min-height，則展現 height 的高度，且高度固定。
- IE6 無此項；Firefox, Safari, Chrome 有支援。
CSS hack min-height。IE6 沒有 min-height，但是 IE6 的 height 運作方式類似 min-height；當內容超過高度時，會擴張高度。CSS hacks 利用下面的幾個條件，達成跨瀏覽器的統一性：
- IE6 不認得 min-height：該行會被 IE6 忽略；IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
- IE6 不認得 !important：該行會被 IE6 忽略，最後 IE6 解讀 height:100px。IE7, IE8, Firefox, Safari, Chrome 可正確解讀 !important，因此該行優先權高於 height:100px。
- 風格用法：
<style type='text/css'>
.hack {min-height: 100px;
height: auto !important;
height: 100px;
width:100px;
background:#339;
}
</style>
<p class='hack'>
好玩遊戲
</p>
<p class='hack'>
好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲
</p> - 執行結果：
好玩遊戲
好玩遊戲, 射擊遊戲, 益智遊戲, 賽車遊戲, 武打遊戲, 越野遊戲, 猜謎遊戲, 戰爭遊戲
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {width:200px;
height:120px;
border:solid 1px red;
}
.hvr:hover {height:150px;}
.hvr:active {height:180px;}
</style>
<div class=hvr>
射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲.
</div> - 執行結果：
射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲.
javascript 應用。可以用 style 物件 的特徵 height，作動態變化。
- 風格用法：
<div id='test' style='background:#339; width:100px'>變長變短</div>
<script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'","'+ms+'")', ms);
}
toggleCSS("test", "height", "100px", "120px", 1500);
</script> - 執行結果：變長變短
