內部div的高度，使用h-full卻無法獲取外部div的高度

css height

greenriver 2023-12-15 11:35:24 ‧ 1938 瀏覽

分享至

大家好，
想請問大家，為了使子元件的高度能填滿整個頁面的高度，
所以設定如下。
section 跟 .outside 的高度，可以正常填滿整個頁面。
但是 .inside 卻無法，它只會維持在自己高度，height:100% 沒有作用。
這是為什麼?

<section>
  <h2></h2>
  <div class="outside">
    <div class="inside">a</div>
  </div>
</section>

section{
    display:flex;
    flex-direction: column;
    min-height: 100vh;
}
.outside{
    width:100%;
    flex: 1 1 0%;
    padding: 20px;
}
.inside{
    width:100%;
    height:100%;
}

davidchen0117 iT邦新手 4 級 ‧ 2025-05-15 10:38:29 檢舉

.inside 的 height: 100% 會試圖繼承「父層 .outside 的高度」。

但 .outside 並沒有明確高度，它的高度非固定數值或 % 計算來的。

所以，.inside 沒有一個可以「計算的明確高度」，導致 height: 100% 無效。

davidchen0117 iT邦新手 4 級 ‧ 2025-05-15 10:39:36 檢舉

section {
display: flex;
flex-direction: column;
height: 100vh; /* 明確設定高度 */
}

.outside {
height: 100%; /* 繼承 section 高度 */
padding: 20px;
box-sizing: border-box; /* 確保 padding 不超出範圍 */
}

.inside {
height: 100%; /* 現在有效了 */
}

davidchen0117 iT邦新手 4 級 ‧ 2025-05-15 10:40:06 檢舉

若 .inside 是唯一子元素，也可以直接使用 flex 撐滿它：

.outside {
display: flex;
flex-direction: column;
flex: 1 1 0%;
padding: 20px;
}

.inside {
flex: 1; /* 撐滿 .outside */
}

登入發表討論