我想要一个有特定高度的垂直菜单
每个子级必须填充父级的高度，并具有中间对齐的文本
子对象的数量是随机的，因此我必须处理动态值
Div.container包含随机数目的子项（.item），这些子项始终必须填充父项的高度。为了实现这一点，我使用了flexbox
为了制作文本与中间对齐的链接，我使用了display:table cell技术。但是使用表格显示需要使用100%的高度
我的问题是.item-inner{height:100%}在webkit（Chrome）中不起作用
- 这个问题有解决办法吗
- 或者，是否有一种不同的方法使所有
.item用垂直对齐到中间的文本填充父项的高度
这里的示例JSFIDLE应该在Firefox和Chrome中查看
.container{
高度：20em；
显示器：flex；
弯曲方向：立柱；
边框：5px纯黑
}
.项目{
弹性：1；
边框底部：1px纯白；
}
.项目内部{
身高：100%；
宽度：100%；
显示：表格；
}
a{
背景：橙色；
显示：表格单元格；
垂直对齐：中间对齐；
}<；div class=“container”>；
<；div class=“项目”>；
<；div class=“项目内部”>；
<；a>；按钮</a>；
</部门>；
</部门>；
<；div class=“项目”>；
<；div class=“项目内部”>；
<；a>；按钮</a>；
</部门>；
</部门>；
<；div class=“项目”>；
<；div class=“项目内部”>；
<；a>；按钮</a>；
</部门>；
</部门>；
</部门>解决方案
使用嵌套的flex容器
摆脱百分比高度。去掉表属性。摆脱垂直对齐。避免绝对定位只要一直坚持使用flexbox即可。
将display:flex应用于flex项（.item），使其成为flex容器。这会自动设置align items:stretch，这会告诉子项（.item-inner）展开父项的整个高度
重要提示：删除flex项中的指定高度以使此方法生效。如果子项具有指定的高度（例如高度：100%），则它将忽略来自父项的对齐项：拉伸。对于默认的拉伸，孩子的身高必须计算为自动（完整解释）
尝试以下操作（不更改HTML）：
.container{
显示器：flex；
弯曲方向：立柱；
高度：20em；
边框：5px纯黑
}
.项目{
显示：flex；/*新建；嵌套flex容器*/
弹性：1；
边框底部：1px纯白；
}
.项目内部{
显示：flex；/*新建；嵌套flex容器*/
弹性：1；/*新*/
/*高度：100%；<；--删除；不必要*/
/*宽度：100%；<；--删除；不必要*/
/*显示：表格；<；--删除；不必要*/
}
a{
显示：flex；/*新建；嵌套flex容器*/
弹性：1；/*新*/
对齐项目：居中；/*新建；垂直居中文本*/
背景：橙色；
/*显示：表格单元格；<；--删除；不需要*/
/*垂直对齐：中间；<；--删除；不需要*/
}<；div class=“container”>；
<；div class=“项目”>；
<；div class=“项目内部”>；
<；a>；按钮</a>；
</部门>；
</部门>；
<；div class=“项目”>；
<；div class=“项目内部”>；
<；a>；按钮</a>；
</部门>；
</部门>；
<；div class=“项目”>；
<；div class=“项目内部”>；
<；a>；按钮</a>；
</部门>；
</部门>；
</部门>JSFIDLE演示
解释
我的问题是，
.item-inner{height:100%}在中不起作用
webkit（Chrome）
它不起作用，因为您使用的百分比高度不符合规范的传统实现
10.5内容高度：
高度属性百分比
指定百分比高度。百分比是根据生成的长方体形状的高度计算的
包含块。如果包含块的高度不是
明确指定，并且此元素不是绝对定位的，则该值计算为auto自动
高度取决于其他属性的值
换句话说，要使百分比高度对流入子级起作用，父级必须具有设置的高度
在代码中，顶级容器有一个定义的高度：.container{height:20em；}
第三级容器具有定义的高度：。项内部{height:100%；}
但在它们之间，是第二级容器&ndash项&ndash没有定义的高度。Webkit认为这是一个缺失的环节
.item-inner告诉Chrome:给我高度：100%。Chrome寻找父项（.item）作为参考，并回答：100%什么？我没有看到任何东西（忽略那里的flex:1规则）。因此，它根据规范应用了高度：auto（内容高度）
另一方面，Firefox现在接受父母的弹性高度作为孩子身高百分比的参考。IE11和Edge也接受弯曲高度
此外，如果与flex-basis一起使用，Chrome将接受flex-grow作为适当的父参考（任何数值都有效（auto不会），包括flex-basis:0）。然而，在撰写本文时，这个解决方案在Safari中失败了
#outer{
显示器：flex；
弯曲方向：立柱；
高度：300px；
背景色：白色；
边框：1px纯红；
}
#中间的{
柔性生长：1；
弹性基准：1px；
背景颜色：黄色；
}
#内在的{
身高：100%；
背景颜色：浅绿色；
}<；div id=“外部”>；
<；div id=“middle”>；
<；div id=“内部”>；
内部的
</部门>；
</部门>；
</部门>四种解决方案
1。在所有父元素上指定高度
可靠的跨浏览器解决方案是在所有父图元上指定高度。这防止了丢失的链接，基于WebKIT的浏览器认为违反了规范
。
请注意，最小高度和最大高度是不可接受的。它必须是height属性。
更多详细信息：使用CSSheight属性和百分比值
2。CSS-Relative&；绝对定位
将position:relative应用于父对象，将position:absolute应用于子对象
使用高度：100%和宽度：100%调整子对象的大小，或使用偏移属性：顶部：0，右侧：0，底部：0，左侧：0
使用绝对定位时，“百分比高度”在父对象上没有指定高度的情况下工作
3。删除不必要的HTML容器（推荐）
按钮周围是否需要两个容器？为什么不删除.item或.item-internal，或同时删除两者？尽管按钮元素有时作为flex容器失败，但它们可以是flex项。考虑制作按钮子>代码>容器或项目，删除无用标记。
下面是一个例子：
.container{
高度：20em；
显示器：flex；
弯曲方向：立柱；
边框：5px纯黑
}
a{
弹性：1；
背景：橙色；
边框底部：1px纯白；
显示：flex；/*嵌套flex容器（用于对齐文本）*/
对齐项目：居中；/*垂直居中文本*/
对齐内容：居中；/*水平居中文本*/
}<；div class=“container”>；
<；a>；按钮</a>；
<；a>；按钮</a>；
<；a>；按钮</a>；
</部门>4。嵌套弹性容器（推荐）
摆脱百分比高度。去掉表属性。除掉