Html 如何使元素100%占用其父元素'；s空间？

我有一些链接，我需要采取100%的高度提供给他们，不幸的是，我不能让它工作

JSFIDLE版本（您可以自己尝试）：

*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
背景色：rgb（220、220、220）；
}
导航跨度{
显示：内联块；
}
导航{
背景色：#ED2939；
}
导航h1{
背景颜色：蓝色；
}
导航a{
背景颜色：蓝色；
颜色：白色；
显示：内联块；
身高：100%；
}

文件
我的页面

这些是要对代码进行的编辑

nav {
    background-color: #ED2939;
    display:flex;
}
nav a {
    background-color: blue;
    color: white;
    display: flex;
    align-items: center;
}

摘要

将“导航”和“a”设置为弯曲并对齐中心“a”元素

---

jsFIDLE:

只是为了澄清一下，为什么您的css不能按预期工作：

使用百分比

高度

是相对于元素的父元素的。如果在您的情况下

nav

的父元素没有设置高度，则元素高度（在您的情况下

nav a

）默认为自动

因此，为了让您的示例发挥作用，您需要将

nav

的高度设置为一些非百分比固定值，例如28px。但是，内联块元素将存在对齐问题，并且元素前面会有一个自然可见的空间

---

如上所述，要么坚持使用display:flex——在这里通读一本不错的指南，要么（过时）

display:block；浮动：左和一组
行高
 让容器成为flexbox容器如果你再次回答我的问题（非常感谢），让我试试？这将做什么-它是如何工作的？默认情况下，flexbox有一个拉伸对齐，这将使元素具有所有高度（您还需要删除高度：100%），我应该将其添加到哪个元素？我尝试了每个a标记，但它不起作用。