0

メニューボタンを押したときに前後にスライドできるように、ナビゲーションとWebサイトを絶対に配置する次の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;
    }
4

2 に答える 2

0

コンテナーとナビゲーションおよび Web サイトの間に div を使用して修正し、絶対位置を指定しました。それで、コンテナを次のようにすることにしましたmin-width: 100%

于 2013-04-18T13:11:55.987 に答える