如何让浮动的子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中文网其他相关文章！