HTML5/CSS: 如何实现滚动条

Question

在我的 div 容器中，许多 <p> 元素占据了太多 space，以至于它们从我的 'position: fixed;' 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>

Answer 1

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

Answer 2

在您的 CSS 中，只需添加

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

HTML5/CSS: 如何实现滚动条

HTML5/CSS: how to implement a scroll bar

html

css

scrollbar