只显示内容区域的滚动条

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

填充内容

填充内容

填充内容

填充内容