如何讓浮動的子div擴展到其父div的高度？

將子Div 高度擴展到父元素的高度

在父元素和子元素並排放置的Web 佈局中，通常有必要以確保他們的高度相等。這是為了防止父元素因為子元素中的內容而顯得被拉伸或壓縮。

問題：

您有一個父親 div 和兩個浮動子 div （左孩子和右孩子）。當child-left的內容增加時，父親div的高度也會隨之調整。但是，child-right 的高度保持不變。

解：

要讓 child-right 的高度等於其父級，請套用下列 CSS styles:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-left {
    float: left;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• .parent:

  • overflow: 隱藏：防止父 div 的內容溢位超出其邊界。
  • position:relative：將父div設定為其子div的相對定位上下文divs.

• .child-left:

  • float: left：將child-left定位到左側

• .child-right:

  • 背景：綠色：用於演示目的的可選顏色。
  • height: 100%：設定子右側的高度以符合其
  • width: 50%：指定 child-right 的寬度為父級的 50%。
  • position:absolute：將 child-right 絕對定位在父級內。
  • right: 0：將子級右對齊到父級的右側。
  • top: 0：將子級右對齊到父級

透過組合這些樣式，您可以實現child-right 所需的高度擴展以匹配其父級，而不管child-left 的內容如何。

以上是如何讓浮動的子div擴展到其父div的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！