百分數高度

前面已經了解了如何處理設置為長度值的高度，下面再花點時間介紹網頁設計中百分數高度。如果一個塊級正常流元素的height設置為一個百分數，這個值則是包含塊height的一個百分數。給定以下標記，相應的段落高度將是3em:

<div style="height: 6em;">

<p style="height: 50%;">Half as tall</p>

由于將上、下外邊距設置為auto時，實際上它們的高度將是0，因此，網頁設計中將元素垂直居中的唯一辦法就是把上、下外邊距都設置為25%。

不過，如果沒有顯式聲明包含塊的height，百分數高度會重置為auto，如果修改上例，使div的height為auto，段落將與div本身的高度完全相同：

<div style="height: auto;">

<p style="height: 50%;">NOT half as tall; height reset to auto</p>

</div>

這兩種可能性在圖7-16中做了展示（段落邊框和div邊框之間的間隔是段落的上、下外邊距）。

圖7-16：不同情況下的百分數高度auto高度

auto高度

在最簡單的情況下，網頁設計中如果塊級正常流元素設置為height: auto。顯示時其高度將恰好足以包含其內聯內容（包括文本）的行盒。高度為auto時，會在段落上設置一個邊框，并認為沒有內邊距，這樣下邊框剛好在文本最后一行的下面，上邊框則剛好在文本第一行的上面。

如果塊級正常流元素的高度設置為auto，而且只有塊級子元素，其默認高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素外邊框邊界之間的距離。因此，子元素的外邊距會“超出”包含這些子元素的元素（這種行為將在下一節(jié)解釋）。不過，網頁設計中如果塊級元素有上內邊距或下內邊距，或者有上邊框或下邊框，其高度則是從其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離：

<div style="height: auto; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">A paragraph!</p>

</div>

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">Another paragraph!</p>

</div>

這兩種行為都在圖7-17中得到了展示，

圖7-17：有塊級子元素且高度為auto

如果在上例中將邊框改為內邊距，對div高度的作用還是一樣：同樣會把段落的外邊距包含在內。