div不能滚动只有浏览器窗口有滚动条

Question

左侧和右侧有很多文本，但无法彼此独立滚动，因为我必须滚动整个浏览器窗口。

在没有浏览器窗口滚动条的情况下，如何在左右 div 中滚动比垂直屏幕更长的文本？

http://jsfiddle.net/uFDK5/5/

CSS：

body {
     background-color:Yellow;   
    margin: 0;
    padding: 0;
    height:100%; 
    width:100%;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

#DataGridButtonBar
{
    background-color:Fuchsia;     
}

#TreeButtonBar
{     
    width:200px;
    float:left;
    background-color:Maroon;    
}

#TreeWrapper{
   background-color:Aqua;    
   width:200px; 
   float:left;      
}

#DataGridWrapper{
     background-color:Silver; 
}

.clear
{
    clear:both;    
}

input button
{
    display:inline;    
}

HTML：

<div id="TreeButtonBar">

    <input type="button" value="Add Node" />
    <input type="button" value="Delete Node" />

</div>    

<div id="DataGridButtonBar">      
    <input type="button" value="Add row" />
    <input type="button" value="Delete row" />
</div>    

<div class="clear"></div>

<div id="TreeWrapper">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>


<div id="DataGridWrapper">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div class="clear"></div>

Answer 1

尝试：

#TreeWrapper{
    background-color: aqua;    
    width: 200px; 
    float: left;      
    position: fixed;
    left: 0px;
    top: 20px;
    bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

#DataGridWrapper{
    background-color: silver;
    position: fixed;
    left: 200px;
    top: 20px;
    bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

Answer 2

这是可行的，但是您可能想调整宽度的高度和宽度......

body {
     background-color:Yellow;   
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

#DataGridButtonBar
{
    background-color:Fuchsia;     
}

#TreeButtonBar
{     
    width:200px;
    float:left;
    background-color:Maroon;

}

#TreeWrapper{
   background-color:Aqua;    
   width:200px;
   height:400px;
   float:left;
   overflow:scroll;    
}

#DataGridWrapper{
     background-color:Silver;
     width:300px;
     height:400px;
     float:left;
     overflow:scroll;
}

.clear
{
    clear:both;    
}

input button
{
    display:inline;    
}

Answer 3

使用CSS中的overflow属性。
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 4

您可以在两个 div 元素上使用 overflow:scroll; CSS 属性来实现此目的。所以在你的情况下它将是：

#TreeWrapper, #DataGridWrapper {
   overflow: scroll; 
}