将div滚动条添加到窗口滚动条中

时间:2016-04-28 11:21:22

标签: javascript jquery html css

在上面的链接中,我想制作单个滚动条(窗口滚动条)而不使用js和jquery更改div.container的高度。

HTML:

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid      ipsam         nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
              </p>
         </div>
        <div class="container2">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ullam saepe qui dolorum, repudiandae sed, consequatur pariatur. Accusantium sint, temporibus, nisi quis, perspiciatis voluptate neque ducimus aperiam est fuga atque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.</p>
             </div>

CSS:

   .container {
        width:100%;
        height:200px;
        background-color:#333;
        color:#fff;
        overflow:auto;
    } 

0 个答案:

没有答案