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中的溢出属性。http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 4

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

#TreeWrapper, #DataGridWrapper {
   overflow: scroll; 
}