html - 具有固定 div 的可滚动布局？

Question

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

注意左右 Pane 永远不应该移动，只有中间 Pane 在垂直滚动时应该滚动。

图片示例:

这是我的左、中、右 Pane 的 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>

任何人都可以帮助保持当前设计启用滚动吗？我尝试添加 overflow: scroll;到 page_container 但这只会向左/向右滚动中心 Pane ，而固定元素不会移动(我认为这是固定元素应该工作的正确方式)

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

为了 float 每一帧以适合内联，您必须考虑滚动条所需的 5px(因浏览器而异)。 1000/3 = 333 - 5 = 328