固定 div 可滚动的布局？

Question

如果浏览器尺寸太小，我试图让 3 个水平固定位置静态宽度 div 元素可滚动。现在，如果浏览器尺寸缩小到小于这 3 个 div 的总宽度，则水平或垂直都不会滚动。

注意左右窗格不应该移动，垂直滚动时只有中间窗格应该滚动。

图片示例：

这是我的左、中、右窗格的 CSS 按顺序排列：

#webcto_menu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    background-image:url(../images/webcto_120.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 67px;
}
#page_contents {
    position: absolute;
    top: 0px;
    left: 160px;
    width: 450px;
}
#webcto_pane {
    position: fixed;
    top: 40px;
    left: 615px;
    width: 510px;
    height: 100%;
    border: 1px solid #A6C9E2;
    overflow: auto;
    background-color: #ffffff;
    background-image:url('../images/sp_bg_lrg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

我还有一个围绕这些 div 的容器：

#page_container {
    min-width:1100px;
}

这是我的 HTML DIV：

<div id="page_container">
    <div id="webcto_menu"></div>
    <div id="page_contents"></div>
    <div id="webcto_pane"></div>
    <div id="webcto_pane_menu"></div>
</div>

谁能帮助保持当前设计启用滚动？我尝试添加溢出：滚动；到 page_container 但只会在固定元素不移动时向左/向右滚动中心窗格（我认为这是固定元素应该工作的正确方式）

Answer 1

我不确定您为什么要使用固定位置 div。但最简单的解决方案是将每个 div 的内容放入 iframe 中。这样，无论样式表中定义的宽度/高度如何，您都可以确定框架内容的固有尺寸。它仍然会尊重定义的样式，但溢出默认为自动。

HTML：

<div id="container">
  <iframe id="one" src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
  <iframe id="two" src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
  <iframe id="three"src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
</div>

CSS

#container{
    width: 1000px;
    margin: 0 auto;
    }
        #one{
        width: 328px;
        height: 1000px;
        float: left;
        }
        #two{
        width: 328px;
        height: 1000px;
        float: left;    
        }
        #three{
        width: 328px;
        height: 1000px;
        float: left;    
        }

为了使每个帧浮动以使其适合内联，您必须考虑滚动条所需的 5px（因浏览器而异）。 1000/3 = 333 - 5 = 328