如何让元素 100% 占用父元素的 space？

Question

我有一些链接需要占据它们可用高度的 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% 的 space，我如何在不硬编码的情况下做到这一点值或使用填充？然后，将文本垂直居中？

Answer 1

这些是对代码进行的编辑

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/

Answer 2

澄清一下，为什么您的 css 没有按预期工作：

使用百分比 height 是相对于元素的父元素。如果父元素，在您的情况下 nav 没有设置高度，则元素高度（在您的情况下 nav a）默认为 auto.

因此，为了使您的示例生效，您需要将 nav 的高度设置为某个非百分比固定值，例如 28px。但是，您的内联块元素将有一个对齐问题以及元素前面的自然可见 space。

正如上面的回答，要么坚持 display: flex - 在这里阅读一个很好的指南 A Complete Guide to Flexbox 或（过时的）display: block; float: left; 和一组 line-height。

如何让元素 100% 占用父元素的 space？

How to make elements take 100% of their parent's space?

html

css

height

layout