Question

最简单（我希望）在这里查看：http://jsfiddle.net/UG7un/

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

<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

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

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

它会在wrap div。

中显示滚动条

Answer 2

您需要指定身高;

#content {
    overflow:auto;
    height:360px;
    width:45%;
    padding:2.5%;
   float:left;
}

http://jsfiddle.net/UG7un/1/

Answer 3

你是说这个意思吗？ http://jsfiddle.net/UG7un/3/

注释掉：

position:fixed;

以及JS的几行。

如何使用本机浏览器滚动在固定包装器中滚动内容

3 个答案: