Scrollable <DIV> </div> Area


Registered User
57 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




Senior Advisor
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.


Senior Advisor
10,458 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 :)
Jo Ann

http://elementsinwebdesign.com

Some websites created by Elements in Webdesign:
http://cattownrescue.org - A friends site I created to help raise awareness to help stray cats in her area.
http://northbaldwinliteracycouncil.org - the local Literacy Council in my city.
http://lalookssalon.com - one of the local hair dressers in my town.
http://gregmaisfund.com - Dedicated to a friend who recently passed away from Lung Cancer.



Registered User
57 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




Senior Advisor
10,458 posts

You're quite welcome, there's lots of great little scripts there to use. Enjoy!
Jo Ann

http://elementsinwebdesign.com

Some websites created by Elements in Webdesign:
http://cattownrescue.org - A friends site I created to help raise awareness to help stray cats in her area.
http://northbaldwinliteracycouncil.org - the local Literacy Council in my city.
http://lalookssalon.com - one of the local hair dressers in my town.
http://gregmaisfund.com - Dedicated to a friend who recently passed away from Lung Cancer.



Ambassador
1,463 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
---------------------------
http://www.freebits.co.uk/


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.