Html 无垂直滚动的div布局全高

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

这是带有y的演示

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>

主要问题是高度，导航没有全高

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

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

---

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

有时候，百分比不起作用，所以尝试使用“vh”。将“100vh”值用于导航

nav{
height: 100vh;
}

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

如果这不起作用，请尝试值“inherit”

nav{
height: inherit;
}

---

它有时会起作用。

您是否尝试过清除浮动？不确定我应该浮动什么。。。

nav{
height: inherit;
}