你如何建立一个在一个div中垂直滚动的网站，但只在一个子div中水平滚动？

Question

我需要有一个站点，其中左（红色）列是静态的，全高度而不是移动而右列（蓝色和绿色一起）垂直滚动，最后右下（绿色）部分将水平滚动。

我能够通过将绿色部分设置为溢出来部分获得此效果：可见并且蓝色和绿色部分一起溢出：自动，但是仍然使蓝色部分与绿色部分一起移动并显示空白点在水平滚动时右上角。

编辑1： 我也能得到一个这样做的配置，但是在长内容的屏幕上，水平滚动条被推到了垂直滚动部分的底部。这比我目前使用标题的问题更不可取。

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

Answer 1

查看overflow-x和overflow-y属性。

overflow-x documentation

overflow-y documentation

基本上，您可以使用这两个属性来控制允许用户滚动的方向。你想要做的是让你的右列（蓝色和绿色）滚动overflow-y: scroll;和overflow-x: hidden，然后对最后一部分（水平滚动）进行相反的操作。

.col-right {
    overflow-y: scroll;
    overflow-x: hidden;
}
.col-right > .blue {
    overflow: hidden;
}
.col-right > .green {
    overflow-y: hidden;
    overflow-x: scroll;
}

我编写了类名并直觉使用了您正在使用的HTML结构，但您明白了。

Answer 2

以下可能符合您的要求： 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;
}

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

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