只顯示內容區域的滾動條

top

leftmenu

container

有一種布局如下,頭區貼頂固定,滾動不跟隨.左側菜單也固定,也不跟隨.只有右側的內容區要有豎滾動條,並且滾動條只在這內容區域內.要如何實現?

*關鍵位置在於,html設置了overflow:hidden.而container設置了豎滾動條 並且 從html body 到 container都設置了100%的高度

html 結構如下和樣式如下

html->body->[div:top div:leftmenu div:container]

       * {
            margin:0;padding:0;
        }
        html{
            overflow:hidden;
            height:100%;
        }
        body{
            height:100%;
        }
        .top,.leftmenu{
            position:fixed;
        }
        .top{
            top:0;left:0;
            width:100%;
            height:48px;
            background-color:#696969;
        }
        .leftmenu{
            left:0;top:48px;
            background-color:#a9a9a9;
            width:200px;
            height:100%;
        }
        .container{
            height:100%;
            margin:48px auto auto 200px;
            padding:10px;
            overflow-y:scroll;
        }

填充內容

填充內容

填充內容

填充內容