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语句，最后是一个演示小提琴。

.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

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

.nav nav {
    height: 100%;
}

Working CodePen demo

在相对位置“<a>` list</a>上定义宽度百分比

1 个答案: