Curabitur varius ipsum ac ante. Integer at felis. Nam ac leo sollicitudin velit faucibus fringilla. Praesent lacinia ipsum quis sem. Proin fringilla lacinia ipsum. Etiam imperdiet pede nec massa. Nulla interdum, nulla non sollicitudin volutpat, diam turpis tempor libero, quis egestas nunc orci ac sem. Mauris nisl nibh, condimentum ut, aliquet in, tincidunt vitae, leo. Fusce consequat, lectus eu sagittis bibendum, lectus odio aliquam nisi, in aliquet erat ligula nec nibh. Proin tincidunt. Aenean pretium blandit neque. Etiam libero nibh, molestie eget, sodales id, placerat sed, turpis. Proin ligula velit, ultricies id, hendrerit et, molestie ut, sapien. Nunc facilisis.
Basically, the scrollable content above is just done by using CSS and not iframe. This can be achieve by setting up a specific width and height of a div tag, and putting a lot of text inside the div. Finally, we add the overflow property to allow the scrollbar appears. The specific CSS styles is shown below.
.scrollable
{
height: value px; /* set the height */
width: value px; /* set the width */
overflow:auto; /* make the scrollbar appears */
}
That’s it! The basic property to make a scrollable content. It works on Firefox and IE6 browser. You can add other styling as well if you want, for example border or background properties. Some advance styling will be putting a fade off effect on top and bottom of the content area.
This scrollable content CSS is particular useful if you want to display data like Latest News for example, and wanted to control the height of the content. Plus, it is better than using this method than iframe is that, all the contents will be in the same page and not load from other page (which iframe did this), so the SEO value is preserve.
Comments