你如何建立一個網站，在一個div中垂直滾動但水平只在一個子div中？

Question

我需要一個網站，其中左（紅色）列是靜態的，全高並且不移動，右列（藍色和綠色一起）垂直滾動並且最後右下（綠色）部分將水平滾動。

我能夠通過將綠色部分設置爲溢出來看到這一點：可見和藍色和綠色部分一起溢出：auto，但是仍然使藍色部分與綠色部分一起移動，並在水平滾動時右上角。

編輯1： 我也能夠得到這樣做的配置，但在具有長內容的屏幕上，水平滾動條被推到垂直滾動部分的底部。這比我目前在標題中遇到的問題要少得多。

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

我不主張這是最好的解決方案爲您的用例，但儘可能我測試過了，它運行良好。

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

Answer 2

看一看在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結構，但你明白了。