javascript - CSS 帮助请求 DIV 放置和滚动

Question

我正在尝试用 div 模拟一个 4 框架的页面，但我遇到了一些我无法解决的问题......这是一个快速草图:

这是我用来设置 DIV 样式的 CSS:

#wrapper {
     width: 100%;
     height: 90%;
     margin: 0 auto;
}
#leftpane, #rightpane {
    border: 1px solid black;
    float: left;
    color: white;
    background-color: white;
    height: 90%;
    top: 5%;

}
#leftpane {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%; 
}
#rightpane {
    position: absolute;
    left: 50%;
    bottom: 0;
    right: 0; 
}
#topmenu
{
   position:fixed;
   top:0px;
   height:5%;
   background-color: gray;
}
#footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

这是我创建的 DIV:

<div id="wrapper">
    <div id="topmenu"></div>
    <div id="leftpane"></div>
    <div id="rightpane"></div>
</div>
<div id="footer"></div>

DIV 的内容是通过 AJAX 调用设置的，实际上发生的是整个页面只是滚动......所有的 DIVS，所有的文本 :(

我想要以下行为:左和右 div 可以相互独立滚动，顶部菜单和页脚保留在那里，无论左/右 Pane 中有什么以及其中有多少文本(右现在，如果文本太多，左/右 Pane 内容会覆盖页脚 DIV :( )。

(是的，在 DIV 之前，我有一个带框架的页面设计，它工作得很好(正如预期的那样:))，但由于某些功能要求，我们需要切换到这个 DIV 设计。请放纵一下这个初学者级别的问题 :) ...我只是在学习 CSS、javascript 和 WEB 编程 :) )

Answer 1

尝试添加:

overflow-y:scroll;

在#leftpane, #rightpane