How to create two independent columns in a webpage?
I want to have two columns in webpage and each one with their开发者_JAVA技巧 own scrollbars instead of the common one that both uses. For example, what I'm thinking is along the lines of new twitter ui.. where one column shows the list with its scrollbar if the list is longer than the height and similarly the other column shows the details with its own scrollbar.
I am simply lost which way to proceed, do I need to use frames to achieve this. Can the global scrollbar be suppressed and each column use their own scrollbar with css?
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%
}
Take a look at the CSS overflow property, it allows you to turn on scrollbars for a particular element, such as a div. Make sure you set a width and height on the element as well, otherwise it'll just expand to fit your content.
加载中,请稍侯......
精彩评论