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
jayjay
Registered User
55 posts
SirAGE
Advisor
1,622 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."
http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.
#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."
http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.
Jo Ann
Senior Advisor
9,145 posts
Online Now
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://lbwebsites.com - Affordable Web Design & Hosting
http://cattownrescue.org ... Love this site! Love cats! This site was definitely fun to do
http://northbaldwinliteracycouncil.org .... Our local Literacy Council
Jo Annhttp://lbwebsites.com - Affordable Web Design & Hosting
http://cattownrescue.org ... Love this site! Love cats! This site was definitely fun to do
http://northbaldwinliteracycouncil.org .... Our local Literacy Council
jayjay
Registered User
55 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
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
Jo Ann
Senior Advisor
9,145 posts
Online Now
You're quite welcome, there's lots of great little scripts there to use. Enjoy!
Jo Ann
http://lbwebsites.com - Affordable Web Design & Hosting
http://cattownrescue.org ... Love this site! Love cats! This site was definitely fun to do
http://northbaldwinliteracycouncil.org .... Our local Literacy Council
http://lbwebsites.com - Affordable Web Design & Hosting
http://cattownrescue.org ... Love this site! Love cats! This site was definitely fun to do
http://northbaldwinliteracycouncil.org .... Our local Literacy Council
Jim Cantrell
Senior Advisor
1,461 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/
Easy Scrolling Boxes using CSS Jim
---------------------------
http://www.freebits.co.uk/
Ben W.
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
<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" */
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.
