如何使浮动 Div 达到其父级高度的 100%？

在父级内实现浮动 div 的 100% 高度

当尝试将浮动 div 设置为其父级的 100% 高度时，您可以遇到内部 div 以 0px 高度渲染的挑战。此行为归因于 HTML 元素的默认垂直对齐方式。要解决此问题，您必须配置父级 div 的显示属性以启用垂直对齐。

解决方案：

强制内部 div 匹配父级的高度，修改CSS如下：

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

附加注意事项：

• 前缀： 添加适当的 CSS 供应商前缀以实现跨浏览器兼容性非常重要。
• Internet Explorer： 由于对 Flexbox 的支持有限，Internet Explorer 9 及更早版本可能无法显示布局
• 对齐方式： 默认情况下，父元素的align-items属性设置为“stretch”，这意味着子元素（包括内部div）将垂直对齐和拉伸来填充可用空间。如果您的子div需要不同的对齐方式，可以使用align-self属性。

实例：

点击以下链接查看实例JSFiddle 演示：https://jsfiddle.net/bv71tms5/2/

以上是如何使浮动 Div 达到其父级高度的 100%？的详细内容。更多信息请关注PHP中文网其他相关文章！