HTML5 / CSS:如何实现滚动条

时间:2015-08-29 21:01:41

标签: html css html5 scrollbar

在我的div容器中,许多<p>元素占用了太多空间,以至于它们从我的位置泄漏出来:固定;&#39; div元素。这是预期的,所以我想在div元素的右边实现一个滚动条,以帮助读者向下滚动文本 但是,我不知道如何实现它。

这就是我所拥有的:

#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>

2 个答案:

答案 0 :(得分:2)

overflow-y: scroll;添加到#rdiv2的CSS中。 <div>只会与您设置的height一样高。

答案 1 :(得分:0)

在CSS中,只需添加

即可
overflow-x:scroll;
overflow-y:scroll;