為什麼我的 CSS 百分比高度不起作用？

CSS 高度百分比不起作用

嘗試將元素的高度指定為百分比時，它可能無法如預期顯示。這是因為百分比高度是相對於其父元素的。因此，將所有父元素的高度設為 100% 至關重要。

在提供的程式碼片段中：

<div>
<p>問題是由於缺少高度聲明而產生的父元素，即body和html元素。如果沒有此聲明，div 的百分比高度將被解釋為相對於其父級的預設高度（通常不會設定）。 </p>
<p>要解決此問題，請將body 和html 元素的高度明確設定為100% ，確保它們佔據整個視窗：</p>
<pre class="brush:php;toolbar:false">html, body { height: 100%; width: 100%; margin: 0; }

透過將html 和body 元素設定為100% 高度，div 元素現在能夠正確計算其高度基於其父級的高度，現在是視口的100%。因此，div 將正確顯示，其高度跨越瀏覽器視窗的整個高度。