2

Easiest (I hope) to just check it out here: http://jsfiddle.net/UG7un/

There is a fixed wrapper that covers the whole page with a 20px margin. How do I get content to scroll within that wrapper?

<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;
}
4

3 回答 3

0

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

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

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

于 2013-05-02T20:30:23.083 回答
0

你的意思是这样吗？ http://jsfiddle.net/UG7un/3/

注释掉了：

position:fixed;

和几行JS。

于 2013-05-02T22:21:59.550 回答
0

您需要指定高度；

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

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

于 2013-05-02T21:05:53.070 回答