时间戳

首页 > 解决方案 > 如何使元素占用其父级空间的 100%？

html - 如何使元素占用其父级空间的 100%？

问题描述

我有一些链接需要占用他们可用高度的 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如您所见，尽管有and ，但链接不会占用 100% 的空间，height: 100%如果不对值进行硬编码或使用填充，我该如何做到这一点？之后，将文本垂直居中？

标签： htmlcsslayoutheight

解决方案

只是为了清除，为什么你的 css 不能按预期工作：

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

因此，要使您的示例正常工作，您需要将高度设置nav为某个非百分比固定值，例如28px。但是，您的 inline-block 元素将存在对齐问题以及元素前面的自然可见空间。

正如上面回答的那样，要么坚持显示： flex - 在此处阅读一个很好的指南A Complete Guide to Flexbox或（过时的）display: block; float: left;和一个 set line-height。

推荐阅读