為什麼在容器 div 中使用 100% 高度時，內部 div 在 IE 中無法達到完整高度？

Firefox 和IE 中Div 定位中的CSS 高度怪異

在這種情況下，目標是建立一個封裝兩個內部div的容器div div，都跨越100% 的寬度和高度。雖然這在 Firefox 中按預期工作，但 IE 表現出一種特殊的行為，即內部 div 無法達到容器的完整高度，而將它們留在所包含文本的高度。

這個差異源自於以下概念CSS 計算中的「包含區塊」。百分比不是相對於視口計算的，而是相對於「包含區塊」的高度計算的 - 在本例中為 #container div。

在提供的 CSS 中，#container 缺乏明確的高度規範，依賴預設為「自動」。這意味著它的高度是根據裡面的內容來決定的。隨後，內部 div 的 100% 高度屬性變得相對於此自動高度，該高度會根據文字內容而變化。

要修正此問題，需要進行以下調整：

1. 為#container 聲音明顯式高度值以建立包含區塊：

   <code class="css">#container {
     height: 100%;
   }</code>

   登入後複製

2. 設定html 和body 的高度，因為初始包含區塊是瀏覽器- dependent:

   <code class="css">html, body {
     height: 100%;
   }</code>

   登入後複製

這些修改將使內部div 跨越#container 的整個高度和100% 的視口，解決在IE 中觀察到的高度問題。

以上是為什麼在容器 div 中使用 100% 高度時，內部 div 在 IE 中無法達到完整高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！