jquery - 如何构建一个在一个 div 中垂直滚动但仅在子 div 中水平滚动的网站？

Question

我需要一个网站，其中左(红色)列是静态的、全高的且不移动，右列(蓝色和绿色一起)垂直滚动，最后右下角(绿色)部分将水平滚动。

通过将绿色部分设置为溢出:可见并将蓝色和绿色部分一起设置为溢出:自动，我能够部分实现这一点，但是这仍然使蓝色部分与绿色部分一起移动，并在水平滚动时位于右上角。

编辑 1:我也能够得到这样的配置，但是在内容很长的屏幕上，水平滚动条被推到垂直滚动部分的底部。这比我目前遇到的 header 问题更不理想。

编辑 2:目前我在想我需要使用 jquery 或 javascript 来扩展页眉部分的左边距，以便在页面滚动时将其推来推去。不过，我想不出一种方法来获取滚动像素的数量。

Answer 1

也许以下内容符合您的要求: http://jsfiddle.net/N6FfW/1/

HTML

<div id='left'>
</div>
<div id='wrapper'>
    <div id='top'>
    </div>
    <div id='bottomwrapper'>
        <div id='bottom'>
        </div>
    </div>
</div>

相关 CSS

/*box-sizing has to be added because we set a padding for #left and #bottom
which then would be bigger than they should. (It includes padding 
and border into the height and width)*/

#left, #bottom {
    box-sizing:border-box;
}
#left {
    float:left;
    background-color:red;
    width:200px;
    height:100%;
}
/*Overflow:hidden establishes a new Block Formatting Context for the
wrapper, which will prevent #left from intruding into it*/

#wrapper {
    overflow-y:auto;
    height:100%;
}
/*The following creates an invisible floated box with full height in the #wrapper*/

#wrapper:before {
    height:100%;
    float:left;
    content:'';
}
#top {
    background-color:blue;
    min-height:200px;
}
/*Position has to be set to relative, so that the contained box
#bottom can expand to full height and width of this wrapper
with height:100% and width:100%. We have to use a wrapper because
we can't set overflow-x:auto to this wrapper directly: This would
cause a new BFC to be established and the previously defined
left-floated box couldnt affect the layout of this box anymore,
it wouldnt expand to full height.*/

#bottomwrapper {
    position:relative;
}
/*Creates an invisible box at the end of #bottomwrapper, which
will be shifted downwards until it reaches the end of the
previously defined float:left box (clear:both is responsible
for that). This expands #bottomwrapper to full height, because
it will contain this invisible box in any case.*/

#bottomwrapper:after {
    content: '';
    display:block;
    clear:both;
} 
/*Position:absolute is used so that #bottom can be expanded to full height
and width of its parent container #bottomwrapper.*/
#bottom {
    position:absolute;
    height:100%;
    min-height:200px;
    width:100%;
    background-color:green;
    overflow-x:auto;
    white-space: nowrap;
}

我并不是说这是适合您的用例的最佳解决方案，但据我测试，它运行良好。

有关 block 格式化上下文的更多信息:How does the CSS Block Formatting Context work?