2011-01-06 75 views
3

我想在網頁上有兩列,每一列都有自己的滾動條,而不是兩者都使用的滾動條。例如,我在想的是沿着新的twitter ui ..其中一列顯示列表與滾動條,如果列表比長度高,同樣的另一列顯示與自己的滾動條的細節。如何在網頁中創建兩個獨立的列?

我簡直失去了繼續前進的方式,是否需要使用框架來實現這一點。全局滾動條可以被抑制,每列使用自己的滾動條與CSS?

回答

9

HTML:

<html> 
    <body> 
    <div class='right'> 
     <!-- data --> 
    </div> 
    <div class='left'> 
     <!-- data --> 
    </div> 
    </body> 
</html> 

CSS:

body{ 
    overflow:hidden; /* This will remove the default scroll, not really needed, safer nonetheless */ 
} 
.right, .left{ 
    overflow:auto; /* This will add a scroll when required */ 
    width:50%; 
    float:left; 
    height: 100% 
} 
+0

謝謝你的例子。 – 2011-01-06 11:29:14

2

看看CSS overflow property,它允許您打開特定元素(例如div)的滾動條。確保你在元素上設置了寬度和高度,否則它只會展開以適合你的內容。

+0

感謝,我是在賽道現在..拿到了滾動條在每個格露面。 – 2011-01-06 11:28:57

相關問題