CSS flexbox 布局 : child with height 100%?

标签 css flexbox

我正在尝试使用带有 flexbox 的“ chalice ”式布局 - 在填充页面的列上方固定标题。我的代码基于 this来源。

我的问题是主单元格内带有 height:100% 的子元素不会获取布局的高度。下面的演示说明了我的意思,我希望红色元素占据整个高度(在 Webkit 中测试):

http://jsbin.com/dafac/2/

我该如何解决这个问题?

最佳答案

我使用了 How to make flexbox children 100% height of their parent? 中提到的第二种解决方案使用“position:absolute;底部:0;”创建 flex 元素的全高子项,因为“高度:100%”要求 flex 元素具有明确的高度。

关于CSS flexbox 布局 : child with height 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25435060/

相关文章:

javascript - Slick slide - 滑动位置问题

css - 如何创建页内水平导航锚定系统?

html - 为什么我的动画在 ie 11 中不起作用

html - 自下而上而不是自上而下填充 CSS 网格

html - Bootstrap 表的 IE11 Flex 问题

css - SCSS 后台无效的属性值

javascript - jQuery Datatable 在更新第 2 部分后将 CSS 添加到单元格

html - 对齐多个 Flexbox 行的列

javascript - react 中的弹性盒 : doesn't resize

css - Flexbox - 水平居中 3 个元素但在中心元素上对齐