为什么我的子 DIV 不继承其浮动父级的 100% 高度？

在浮动父级中强制子 DIV 的高度为 100%

在提供的 HTML 和 CSS 中，尽管付出了努力，内部 DIV 的高度仍保持在 0px将其声明为父级的 100%

解决方案：

要解决此问题，父 DIV“outer”需要“display: flex”属性来启用 Flexbox 功能：

#outer {
  display: flex;
}

Flexbox 引入了对灵活布局的支持，允许内部 DIV（“内部”）垂直扩展并占据其整个高度

其他注意事项：

1. 浏览器兼容性： Flexbox 受到现代浏览器的广泛支持，但可能会引起与旧版本的兼容性问题Internet Explorer（例如 IE9）。使用前缀来确保跨各种浏览器的兼容性。
2. 对齐项目与对齐自身：“align-items”是父级的一个属性，用于确定其子级的垂直对齐方式。它的默认值为“stretch”，垂直拉伸所有子项以填充可用高度。如果子 DIV 需要不同的对齐方式，请使用“align-self”属性。
3. JS Fiddle 示例： 访问 https://jsfiddle.net/bv71tms5/2/请参阅建议解决方案的工作示例。

以上是为什么我的子 DIV 不继承其浮动父级的 100% 高度？的详细内容。更多信息请关注PHP中文网其他相关文章！