1. 首頁
  2. 問答
  3. Div無法滾動瀏覽器窗口只有滾動條

Div無法滾動瀏覽器窗口只有滾動條

2012-02-05 193 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

相關問題

 相關問題