html - 如何使用 native 浏览器滚动在固定包装器中滚动内容

Question

最简单的(我希望)在这里查看:http://jsfiddle.net/UG7un/

有一个固定的包装器，它以 20 像素的边距覆盖整个页面。如何让内容在该包装器内滚动？

<div id="wrap">
<div id="content">
    <p>How can I get this to scroll within this white content area only, using the native browser scroll?</p>
</div>
<div id="photo"></div>
</div>

html {
    background:url(http://i1210.photobucket.com/albums/cc406/Ingutuks/2012/P5211369.jpg) no-repeat center center fixed; 
    background-size:cover;
    }

#wrap {
    background:#fff;
    margin:20px;
    position:fixed;
    overflow:hidden;
}

#content {
    width:45%;
    padding:2.5%;
   float:left;
}

#photo {
    width:50%;
    background:url(http://i1351.photobucket.com/albums/p790/KrazyKobraRawr/Jojothecat_zps448af247.jpg) no-repeat center center;
    background-size:cover;
    float:right;
}

Answer 1

如果我理解正确，那么您可以在 wrap div 中使用 overflow:auto;。

#wrap {
    background:#fff;
    margin:20px;
    position:fixed;
    overflow:auto;
}

它将在您的 wrap div 中显示滚动条。