Html 具有相对位置和溢出隐藏的容器'；我长不高

我有下面的CSS，我希望导航和网站绝对定位，这样我可以在按下菜单按钮时来回滑动它们（比如facebook应用程序）。为此，我准备了一个带有

溢出：hidden

（隐藏导航条并在需要时将其滑入）的容器。然而；集装箱失去了它的自动高度，因为我担心它在集装箱内的绝对位置

如何使高度再次自动设置为

overflow:hidden

没有绝对定位

我创建了一个小提琴，其中容器的高度为500px。不过我想自动生成高度刻度

---

如果我很了解你，你想自动缩放容器吗？尝试使用最小高度和最大高度

我通过在容器与导航和网站之间使用div来固定它，并给它一个绝对位置。因此，我决定将容器设置为

最小宽度：100%

，但我不知道，也不想知道具体的高度。它只需要随着内容的扩展而扩展。例如

overflow:hidden

如果其中的div不是绝对定位的话就可以了。

div {
    box-sizing: border-box;
}


.container {
    overflow: hidden;
    width: 100%;
    max-width: 60em;
    padding: 0;
    margin: 0 auto;
    position: relative;
    background: grey;
        height: 500px;
}

    /*CSS for the navigation bar that can be toggled*/
     .navigation {
        width: 15em;
        float: left;
        background: blue;
        position: absolute;
        left: -20px;
    }

    /*The CSS for the actual content*/
     .website {
        width: 100%;
        float: left;
        position: absolute;
        left: 0px;
    }

            .container .website .top_bar {
                height: 4em;
                background: pink;
                padding: 1em;
                position: relative;
            }

                .container .website .top_bar .menu_button {
                    width: 3.2em;
                    height: 2.5em;
                    background: red;
                    border: 0px;
                }


    nav.menu {
        width: 15em;
        position: absolute;
        left: 1em;
        top: 3em;
        background: yellow;
    }