Scrollable Area - Post ID 185112

User 371048 Photo


Registered User
59 posts

Can someone tell me how to make a Scrollable Division section so when the data extends vertically larger than the Division actually is, there will appear a scroll bar within the section and allow a user to scroll up/down?

An example of a site that needs this is here: http://www.jayjaynet.com/jayjay/dev/events_2012.htm


Thank you.
-- me



User 2073552 Photo


Registered User
1,625 posts

<style>
#framearea {
width: 550px;
height: 150px;
margin-bottom: 10px;
}

.framebody {
overflow: auto;
width: 550px;
height: 150px;
}
</style>
<div id="framearea">
<div class="framebody">

...content here...

</div>
</div>
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
User 38401 Photo


Senior Advisor
10,951 posts

And if you're using the HTML Editor, the Snippets have this right in there for you with an explanation of how to use it too :)
User 371048 Photo


Registered User
59 posts

Jo Ann wrote:
And if you're using the HTML Editor, the Snippets have this right in there for you with an explanation of how to use it too :)


Thank you very much. I didn't even see the SNIPPETS tab until I began looking for that after you pointed it out!

-- me



User 38401 Photo


Senior Advisor
10,951 posts

You're quite welcome, there's lots of great little scripts there to use. Enjoy!
User 126492 Photo


Ambassador
1,524 posts

If you get stuck with the scrolling div, there are 3 different example of how to make one here:-

Easy Scrolling Boxes using CSS
Jim
---------------------------
User 2200796 Photo


Registered User
45 posts

Note: You will probably want a separate print stylesheet, or a media block for print in your regular stylesheet, so that when you print out, the div shows all the content and not just a portion within a box with scrollbars. It's been a while since I last did something like that, but at the time, it was needed.


<link rel="stylesheet" type="text/css" href="styles/styles-main.css" media="all,screen" />
<link rel="stylesheet" type="text/css" href="styles/styles-print.css" media="print" />


OR


/* ... CSS code ... */
@media "print" {

#framearea {
width: auto; /* or other value as needed; was 550px; */
height: auto; /* or other value as needed; was 150px; */
margin-bottom: auto; /* or other value as needed; was 10px; */
}

.framebody {
overflow: auto;
width: auto; /* or other value as needed; was 550px; */
height: auto; /* or other value as needed; was 150px; */
}

} /* @media "print" */
http://www.shinyfiction.com/
Writing, Editing, Artwork, Audio, and soon Fonts

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.