CSS 弹性框菜单拉伸到 100% 高度

Question

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

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

无论盒子的数量是多少，我想要实现的都是一样的（盒子将在稍后动态添加到DOM）。
如何将文本放在右下角。做不到。

我宁愿不使用 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

为了在垂直方向均匀分布项目，我会使用 <table> 或 CSS display:table（等）等价物。

Answer 2

使用 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>

CSS 弹性框菜单拉伸到 100% 高度

CSS flexible box menu stretch to 100% height

html

css

flexbox