If you have a long list of items, they can be displayed very easily using an HTML list.
Some people don’t like the way that looks, though, and they’d rather print out the list in one
div after another, like this:
<div>Dashing through the snow</div> <div>In a one-horse open sleigh</div> <div>O'er the fields we go</div> <div>Laughing all the way.</div>
That’s all great, but suppose your list is very long? Maybe most of your users don’t really care about the entire list, and will be satisfied to see just a few lines of it. You don’t want your users to have to scroll pages down to get past all the list items and see more content below it. It’s kind of a tricky problem, but one easy way to solve it is to follow a few simple steps:
(1) List all of your items in individual
(2) Put all items into a containing
div, and limit the height of that
div to a fixed size.
(3) Then, style the containing
div to set
The result is that your content is displayed inside a scrollable
div. Click that link to see a demo page of how it works; you can take a look at the source code by right-clicking and choosing the
view page source menu item. Here’s a screenshot of what it looks like:
Got comments? Send me an email at firstname.lastname@example.org. If you found this interesting, you might want to hit the subscribe button above. I write a new post about once a week.