Question

I’m nearly 2 months old in studying HTML, JavaScript and jQuery. I’ve done a few things but never figured out how to implement a DIV (or anything you may suggest) to emulate a viewport which would display text, textarea, buttons, anchors etc all of which simply cannot fit or be seen within the size of the viewport. Therefore the use of the vertical scroll. No need for horizontal scrolling, though. I can format the objects not to exceed the horizontal view. I thought of using a div inside another div, but the objects inside the INNER DIV just bleed through and show up on the bottom of the site!

Is there some magical panel in jQuery created for that purpose?

TIA

Dennis

Answer 1

If you have a containing div such as <div id="container">, you can add the following properties to it to get it’s content to scroll vertically:

div#container {
    overflow-y: auto;
    height: 100px;
}

This CSS will show a vertical scroll bar if the div’s content exceeds it’s height. The only caveat with this solution is you must set a height on the div.

Here’s an example.