CODEWITHSUNDEEP
csshtmlscrollbar
Adan
Adan

Reputation: 473

HTML5/CSS: how to implement a scroll bar

In my div container, many <p> elements take up so much space, that they leak out of my 'position: fixed;' div element. This is expected, so I want to implement a scroll bar on the right of the div element to help readers scroll down the text.
However, I have no idea how to implement that.

here's what I have:

#rdiv2
{
left:20%;
right:20%;
width:60%;
height:80%;
top:15%;
position:fixed;
}

<div id="rdiv2">
    <article id="article1">
        <h1>Resume</h1>
        <p>Adan Ramirez</p>

        <p>Summary</p>
        <p>Highly dependable, experienced employee and enthusiastic team player dedicated to deliver the</p>
        <p>most out of my employment.  Fluent in English and Spanish.</p>
        <p>Highlights:</p>
        <p>Computer hardware troubleshooting</p>
        <p>1 Year IT Level 1 help desk support</p>
        <p>Network configuring/troubleshooting</p>
        <p>Team Player</p>
        <p>Sociable and willing to work with just about everyone</p>
        <p>CompTIA Security+ Certified-AS in Information Technology 2014</p>
        <p>Windows 7, Dell-OptiPlex Desktops, MS Office, Adobe/Java support</p>
        <p>Experience:</p>
        <p>Spent many years working with technology at home as a passion.</p>
        <p>Currently employed at Oxnard College as IT specialist.</p>
        <p>I get to work with many people in Oxnard College, social skills is what I have.</p>
        <p>I do just about everything in Level 1-2 Tech support</p>
        <p>School internship-Cooperative Work Experience 1.0 Credits, 60 hours were completed:</p>
        <p>I got to install switches and routers in their racks.</p>
        <p>Then we installed power supplies for our switches and routers.</p>
        <p>We also made wall configurations to hang our Ethernet cables.</p>
        <p>Did basic maintenance of the room, such as cleaning, organizing.</p>
        <p>I made RJ-45 cables, tested them, and deployed them.</p>
        <p>I bypassed cisco switches/routers and basic configurations.</p>
        <p>I installed a new image on a PC.</p>
        <p>I installed PSU’s, did some basic maintenance.</p>
        <p>Education</p>
        <p>Oxnard College:</p>
        <p>Associate of Science: Computer Network IT    2014</p>
        <p>Cisco Certificate of Achievement         2014</p>
        <p>Certifications:</p>
        <p>CompTIA Security+</p>

    </article>

</div>

Upvotes: 0

Views: 3462

Answers (2)

Nick Calabro
Nick Calabro

Reputation: 101

In your CSS, simply add 

overflow-x:scroll;
overflow-y:scroll;

Upvotes: 0

Matthew Dunbar
Matthew Dunbar

Reputation: 426

Add overflow-y: scroll; to the CSS for #rdiv2. The <div> will be then only be as high as the height that you set.

Upvotes: 2

Related Questions