div布局全高，无垂直滚动

Question

我正在尝试创建一个布局，在左侧有一个菜单和一个主要内容区域，但高度不能正常工作。

以下是包含code y this fiddle的演示

html为：

<nav>
    <h2>logo</h2>
    <ul id="steps">
        <li><a href="">one</a></li>
        <li><a href="">two</a></li>
        <li><a href="">three</a></li>
        <li><a href="">four</a></li>
        <li><a href="">five</a></li>
        <li><a href="">six</a></li>
    </ul>
    <p>more links</p>
    <p>more links</p>
    <p>more links</p>
</nav>

<div id="main-container" class="clearfix">

    <div id="main-header">
        <p>lorem ipsum</p>
    </div>

    <div id="main-area">

        <section class="step-1">

            <div class="box" data-panel="panel-option1">
                <a href="#">option1</a>
            </div>
            <div class="box" data-panel="panel-option2">
                <a href="#">option2</a>
            </div>
            <div class="box" data-panel="panel-option3">
                <a href="#">option3</a>
            </div>
            <div class="box" data-panel="panel-option4">
                <a href="#">option4</a>
            </div>

        </section>

        <section class="step-2">

        </section>

        <section class="step-3">

        </section>

        <section class="step-4">

        </section>

        <section class="step-5 ">

        </section>

        <section class="step-6">

        </section>


    </div>

</div>

css是：

html,body { height: 100%; }
nav {
    float: left;
    /*display: none;*/
    background-color: #112943;
    width: 324px;
    height: 100%;
}
#main-container {
    width: 100%;
    height: 100%;
    background-color: #EEE;
}
#main-header {
    height: 160px;
    line-height: 160px;
    background-color: #005C85;
    text-align: center;
    font-size: 30px;
    color: #fff;
}
#main-area {
    position: relative;
    height: 100%;
    overflow: hidden;
    background-color: #EEE;
}
#main-area section {
    display: none;
}
#main-area section:first-child {
    display: block;
}

.step-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.step-1 > div {
    position: absolute;
    width: 50%;
    height: 50%;
    text-align: center;
    cursor: pointer;
}

.step-1 > div:first-child {
    top: 0;
    left: 0;
    background: #DDD;
}

.step-1 > div:nth-child(2) {
    top: 0;
    left: 50%;
    background: #CCC;
}

.step-1 > div:nth-child(3) {
    top: 50%;
    left: 0;
    background: #72CCA7;
}

.step-1 > div:nth-child(4) {
    top: 50%;
    left: 50%;
    background: #10A296;
}

主要的问题是高度，导航没有一个完整的高度。

带有4个框的“部分”区域应适合宽度和高度，并显示/隐藏与导航选项相关的部分。

页面没有垂直滚动，所有div都应该适合浏览器的高度

也许我应该使用另一种方法？

Answer 1

有时，百分比不能很好地工作，所以试着使用'vh‘。使用值'100vh‘作为导航。

nav{
height: 100vh;
}

它将采用父元素的完整大小，在本例中为浏览器。

如果这不起作用，那就试试'inherit‘这个值。

nav{
height: inherit;
}

它有时会起作用。