我有一些链接，我需要占用他们可用的高度的 100%，不幸的是我无法让它工作
JSFiddle版本(你可以自己尝试一下)：JSFiddle具有完全相同的代码
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgb(220, 220, 220);
}
nav span {
display: inline-block;
}
nav {
background-color: #ED2939;
}
nav h1 {
background-color: blue;
}
nav a {
background-color: blue;
color: white;
display: inline-block;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="CSS/styles.css">
<title>Document</title>
</head>
<body>
<nav>
<span>
<h1>My Page</h1>
</span>
<a href="#">Home</a>
<a href="#">More</a>
<a href="#">About</a>
</nav>
</body>
</html>如您所见，尽管有display: inline-block和height: 100%，但链接不会占用 100% 的空间，如何在不对值进行硬编码或使用填充的情况下做到这一点？之后，垂直居中文本？
只是为了清除，为什么你的 css 没有按预期工作：
使用百分比height是相对于元素的父级。如果父元素(在您的情况下nav没有设置高度)，则元素高度(在您的情况下nav a)默认为auto。
因此，要使示例正常工作，您需要将nav的高度设置为某个非百分比固定值，例如28px。但是，您的内联块元素将出现对齐问题，并且在元素之前有一个自然可见的空间。
如上所述，要么坚持显示：flex- 在这里阅读一个很好的指南 Flexbox 的完整指南或(过时的)display: block; float: left;和一组line-height。
这些是对代码进行的编辑
nav {
background-color: #ED2939;
display:flex;
}
nav a {
background-color: blue;
color: white;
display: flex;
align-items: center;
}
总结
设置"nav"和"a">以弯曲和对齐居中"a"元素。
JSFiddle： https://jsfiddle.net/b9aergwu/