CSS Flexbox 是创建网站布局的绝佳工具。可以通过两种方式使 flex-box 子项达到其父项的 100% 高度。这有点棘手,因为它肯定会显示错误。
例如,子级可能会流出父级边界,或者它可能不会达到您将在浏览器输出中看到的 100% 高度。
示例 1:此示例使用 CSS 制作高度为 100% 的子 flex-box。
Make flex-box child height 100%
One
Two
Three
Four
Five
输出:
示例 2:实现此目的的第二种方法是在父 div 中使用 align-items 属性为 ‘strech’。它使每个 .child-div 的高度是其父高度的 100%。
Make flex-box child height 100%
One
Two
Three
Four
Five
输出:
示例 3:此示例使子项的宽度为父项的 100%。
Make flex-box child width 100%
One
Two
Three
Four
Five
输出: