CSS 灵活框菜单拉伸到 100% 高度

Question

我正在尝试创建一个灵活的框式菜单，它将被拉伸以填充 100% 的页面高度。

目前我可以做到这一点，但我必须手动将盒子的数量固定为 5，将高度固定为 20%（20% * 5 = 100% 哈利路亚！！）。

1. 无论盒子的数量是多少，我想要实现的都是一样的（盒子将在以后动态添加到 DOM）。

2. 如何将文本放置在右下角。无法做到这一点。

我宁愿不使用 JQuery，而只使用 CSS。

以下是我目前所做的： http://plnkr.co/edit/kgzOsUBeTXlM29GylXUy?p=preview

HTML

<section class="container">
    <div class="nav">
        <div class="box home">
            <a href="#home">HOME</a>
        </div>
        <div class="box about">
            <a href="#about">ABOUT</a>
        </div>
        <div class="box portfolio">
            <a href="#portfolio">PORTFOLIO</a>
        </div>
        <div class="box services">
            <a href="#services">SERVICES</a>
        </div>
        <div class="box contact">
            <a href="#contact">CONTACT</a>
        </div>
    </div>
</section>

CSS

body{
    font-family: 'Droid Sans', serif;
    color:#444;
    font-size:1.6em;
}
.container{
    width:100%;
    min-height:400px;
    height:auto;
}
.nav
{
    width:100%;
    float:left;
}
.box
{
    height:20%;
    overflow: hidden;
    width:200px;
}

.box.home { background-color: #2d89ef; }
.box.about { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services { background-color: #9f00a7; }
.box.contact { background-color: #ee1111; }

.box a
{
    color:#FFF;
    text-decoration: none;
    text-align: right;
    vertical-align: bottom;
    height:100%;
    display:block;
}

Answer 1

使用 flexbox 布局，您可以将.nav 元素的display 设置为flex，然后添加flex-direction: column 以使子元素垂直流动。为了使子 .box 元素拉伸以填充父元素，您可以简单地添加 flex-grow: 1：

Updated Example Here

.nav {
    display: flex;
    flex-direction: column;
}
.box {
    flex-grow: 1;
    width: 200px;
}

html, body, .container, .nav {
    height: 100%;
}
body {
    font-family:'Droid Sans', serif;
    color:#444;
    font-size:1.6em;
    margin: 0;
}
.container {
    width:100%;
    min-height:400px;
}
.nav {
    display: flex;
    flex-direction: column;
}
.box {
    flex-grow: 1;
    width: 200px;
}
.box.home { background-color: #2d89ef; }
.box.about { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services { background-color: #9f00a7; }
.box.contact { background-color: #ee1111; }
.box a {
    color:#FFF;
    text-decoration: none;
}

<section class="container">
    <div class="nav">
        <div class="box home">
            <a href="#home">HOME</a>
        </div>
        <div class="box about">
            <a href="#about">ABOUT</a>
        </div>
        <div class="box portfolio">
            <a href="#portfolio">PORTFOLIO</a>
        </div>
        <div class="box services">
            <a href="#services">SERVICES</a>
        </div>
        <div class="box contact">
            <a href="#contact">CONTACT</a>
        </div>
    </div>
</section>

为了将文本放在底部，将.box 元素的display 设置为flex，并添加justify-content: flex-end 以使文本右对齐。然后将align-self: flex-end 添加到子a 元素中，以便将文本放在底部：

Updated Example Here

.nav {
    display: flex;
    flex-direction: column;
}
.box {
    flex-grow: 1;
    width: 200px;
    display: flex;
    justify-content: flex-end;
}
.box a {
    align-self: flex-end;
}

html, body, .container, .nav {
    height: 100%;
}
body {
    font-family:'Droid Sans', serif;
    color:#444;
    font-size:1.6em;
    margin: 0;
}
.container {
    width:100%;
    min-height:400px;
}
.nav {
    display: flex;
    flex-direction: column;
}
.box {
    flex-grow: 1;
    width: 200px;
    display: flex;
    justify-content: flex-end;
}
.box a {
    align-self: flex-end;
}
.box.home { background-color: #2d89ef; }
.box.about { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services { background-color: #9f00a7; }
.box.contact { background-color: #ee1111; }
.box a {
    color:#FFF;
    text-decoration: none;
}

<section class="container">
    <div class="nav">
        <div class="box home">
            <a href="#home">HOME</a>
        </div>
        <div class="box about">
            <a href="#about">ABOUT</a>
        </div>
        <div class="box portfolio">
            <a href="#portfolio">PORTFOLIO</a>
        </div>
        <div class="box services">
            <a href="#services">SERVICES</a>
        </div>
        <div class="box contact">
            <a href="#contact">CONTACT</a>
        </div>
    </div>
</section>

Answer 2

要垂直均匀分布项目，我会使用 <table> 或 CSS display:table（等）等效项。