Question

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

目前我可以这样做，但我必须手动将箱数设置为5，高度设置为20％（20％* 5 = 100％Hallelujah !!）。

无论盒子数量多少，我想要达到的目标都是一样的（盒子将在以后动态添加到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

使用flexbox布局，您可以将display元素的.nav设置为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>

要将文字放在底部，请将display元素的.box设置为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（等等）。

CSS灵活的盒子菜单伸展到100％的高度

2 个答案: