在網頁布局中，我們經常會接觸到高度百分百的布局，但是很遺憾，CSS的高度百分百并不可靠。以下是一些原因：

1. 相對于父元素的百分比高度需要有一個明確的高度參考
如果父元素的高度并沒有定義，那么子元素的高度百分比就無從談起。這時候瀏覽器會根據元素內容自己去撐開高度，導致布局破壞。

例如：

<div class="parent">
<div class="child"></div>
</div>

該代碼中，父元素定義了寬度，但是沒有定義高度，則子元素的高度百分比并不會生效，元素默認會撐開父元素高度，并且百分比高度無效。

2. 子元素無法比父元素高
如果我們給一個子元素設置了100%的高度，那么子元素的高度最大只能相當于父元素的高度。否則，子元素會突出父元素，破壞布局。

例如：

<div class="parent">
<div class="child"></div>
</div>

該代碼中，由于子元素的高度百分比大于了父元素的高度，因此子元素會突出父元素，破壞了布局。

3. 滾動條的影響
如果父元素的高度固定而子元素的內容高度超出了父元素，則子元素會自動撐開，而父元素則會出現滾動條。這時候如果設定子元素的百分比高度，瀏覽器將無法正常計算百分比，也會導致布局錯亂。

例如：

<div class="parent">
<div class="child">這里是子元素的內容</div>
</div>

該代碼中，由于父元素出現了滾動條而子元素沒有，導致子元素的高度百分比無法計算。

因此，在開發網頁布局時，應該盡量避免使用高度百分百的布局，或是在設計之前對于元素的高度定義非常明確。