html - 在相对定位的 `<a>` 列表上定义宽度(以百分比表示)

Question

我的导航有一堆 <a>链接:

<section class="nav">
    <nav>
        <a href="#" data-hover="BLA">BLA</a>
        <a href="#" data-hover="BLA">BLA</a>
        <a href="#" data-hover="BLA">BLA</a>
        <a href="#" data-hover="BLA">BLA</a>
        <a href="#" data-hover="BLA">BLA</a>
    </nav>
</section>

我的目标是用这些链接覆盖整个显示。所以每个链接需要的高度为20% .

我现在的问题是 <section>有一个position:fixed高度设置为 100% .
如何将高度设置为20%与 position:relative ？

这里是额外的 CSS 语句，最后是演示 fiddle 。

.container,
.container > section, /* the part where the section tag above will set to 100% */
.container > section > article{
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.nav{
    z-index: 1000;
    background: rgba(255, 0, 0, 0.5);
}
.nav nav a{
    display: block;
    height: 20%; /* the 20% which doesn't work because of the position:relative;
    background: blue;
}

http://codepen.io/anon/pen/rhEHl

Answer 1

在 a 元素上设置 height: 20% 将它们设置为其包含元素的 20% 高度。在这种情况下，包含元素是您的 nav，它没有您指定的任何高度，并且默认为其内容的高度。您需要将 nav 设置为 100% 高度以填充部分:

.nav nav {
    height: 100%;
}

Working CodePen demo .