我有一些链接需要占据它们可用高度的 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% 的空间，怎么可能我在不对值进行硬编码或使用填充的情况下执行此操作？然后，将文本垂直居中？
最佳答案
只是为了清除，为什么你的 css 没有按预期工作:
使用百分比 height 是相对于元素的父元素。如果父元素(在您的情况下为 nav)没有设置高度，则元素高度(在您的情况下为 nav a)默认为 auto。
因此，为了让您的示例正常工作，您需要将 nav 的高度设置为某个非百分比固定值，例如 28px。但是，您的内联 block 元素将存在对齐问题以及元素前面的自然可见空间。
正如上面的回答，要么坚持使用display: flex - 在这里阅读一个很好的指南A Complete Guide to Flexbox或(过时的)display: block; float: left; 和一组 line-height。
关于html - 如何让元素占用 100% 的父级空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55202897/