在相对定位的""列表中以百分比形式定义宽度<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%。
如何使用position:relative将高度设置为20%？

这是其他CSS语句，最后是演示小提琴。

.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％高度才能填充section：

.nav nav {
    height: 100%;
}

工作codepen demo 。