我有一些链接，我需要占用他们100％的高度，不幸的是我无法让它工作
JSFiddle版本（你可以自己试试）：JSFiddle With Same Exact Code
* {
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％的空间，如何在不对值进行硬编码或使用填充的情况下执行此操作？然后，将文本垂直居中？
这些是编写代码的编辑
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/
只是为了清除，为什么你的CSS没有按预期工作：
使用百分比height是元素的父亲。如果父元素，在你的情况下nav没有设置高度，元素高度（在你的情况下nav a）默认为auto。
因此，为了使您的示例正常工作，您需要将nav的高度设置为某个非百分比的固定值，例如28px。但是，您的内联块元素将具有对齐问题以及元素之前的自然可见空间。
如上所述，要么坚持显示：flex - 在这里阅读一个很好的指南A Complete Guide to Flexbox或（过时的）display: block; float: left;和一套line-height。