CSS Flexbox 是创建网站布局的绝佳工具。可以通过两种方式使 flex-box 子项达到其父项的 100% 高度。这有点棘手，因为它肯定会显示错误。
例如，子级可能会流出父级边界，或者它可能不会达到您将在浏览器输出中看到的 100% 高度。
示例 1：此示例使用 CSS 制作高度为 100% 的子 flex-box。
html
Make flex-box child height 100%
One
Two
Three
Four
Five
html
Make flex-box child height 100%
One
Two
Three
Four
Five
html
Make flex-box child width 100%
One
Two
Three
Four
Five
输出：
示例 2：通过在父 div 中使用 align-items 属性来“拉伸”来实现此目的的第二种方法。它使每个 .child-div 的高度是其父高度的 100%。
html
Make flex-box child height 100%
One
Two
Three
Four
Five
输出：
示例 3：此示例使子项的宽度为父项的 100%。
html
Make flex-box child width 100%
One
Two
Three
Four
Five
输出：
支持的浏览器：
- 谷歌浏览器 29.0
- 浏览器 11.0
- 火狐 22.0
- 歌剧48
- 野生动物园 10
HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。
CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。