Question

左侧和右侧有很多文字但不能相互独立滚动，因为我必须滚动整个浏览器窗口。

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

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-elements上使用overflow: scroll; CSS属性来实现这一目标。所以在你的情况下它将是：

#TreeWrapper, #DataGridWrapper {
   overflow: scroll; 
}

Answer 5

我很高兴找到这个链接：http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

正是我需要的只是浏览现场演示！像这样：http://stevesanderson.github.com/fixed-height-layouts-demo/two-columns.html

奇妙！

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

5 个答案: