1. 首页
  2. 问答
  3. Div无法滚动浏览器窗口只有滚动条

Div无法滚动浏览器窗口只有滚动条

2012-02-05 167 views
1

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

如何在没有浏览器窗口滚动条的情况下在左右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>

来源

2012-02-05 Pascal

回答

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

来源

2012-02-05 22:16:12

+0

当文字较少时总会有滚动条可见？我不要那个。 http://jsfiddle.net/uFDK5/9/ – Pascal 2012-02-06 07:13:19

+0

我使用Internet Explorer 8. – Pascal 2012-02-06 11:25:01

+0

@Pascal简单，只需更改overflow-y：scroll;溢出-y：auto;我在上面的代码中为你做了这个改变。 – 2012-02-06 18:51:26

0

您在div元素上都使用了overflow: scroll; CSS属性来完成该操作。所以，在你情况下，将：

#TreeWrapper, #DataGridWrapper { 
    overflow: scroll; 
}

来源

2012-02-05 22:14:14

1

这工作，但你可能要摆弄宽度高度和宽度...

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

来源

2012-02-05 22:32:16

相关问题

 相关问题