html - 具有相对位置和溢出隐藏的容器没有高度

Question

我有以下 CSS，我希望导航和网站绝对定位，这样我可以在按下菜单按钮时来回滑动它们（例如 facebook 应用程序）。为此，我有一个带有overflow: hidden（隐藏导航栏并在需要时将其滑入）的容器。然而; 恐怕容器由于内部的绝对定位而失去了它的自动高度。

如何在overflow: hidden没有绝对定位的情况下再次自动设置高度。

我创建了一个小提琴，其中容器的高度为 500px。我想自动制作高度比例。http://jsfiddle.net/rB7EY/

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;
    }

Answer 1

我通过在容器与导航和网站之间使用 div 来修复它，并给它一个绝对位置。有了这个，我决定让容器成为min-width: 100%

Answer 2

如果我理解你，你想自动扩展容器就够了吗？尝试使用最小高度和最大高度