如何将图像用作框架并在内部滚动？ 模拟网站上的电话

Question

我不确定这叫什么，但是开发人员如何才能拥有一个Nexus手机的空心图片，然后滚动其中的内容呢？ 这是一种模拟产品在现实生活中的工作方式的巧妙方法，那么如何做到这一点呢？

这是一个示例，大约位于页面的一半。

http://grupoweb.upf.edu/innova/q_kly/#step-6

@silversunhunter

我可以同时显示两个图像，但是内容似乎完全遮盖了父div。 我测量了图像，并且尺寸正确。

CSS：

.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;

}

.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}

HTML：

<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>                
</div>
</div>
</div>

Answer 1

您需要将图片设置为父div中的背景图片。 然后，经过适当测量且完全定位的div可以作为可滚动内容。

<div id="main">
     <div id="content"></div>
</div>

手机图像为345px×661px

#main {
    background: url(/filelocation) no-repeat;
    height: 661px;
    width: 345px;
    position: relative;
}

屏幕是305x601（假设）

#content {
    overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
    height: 601px;
    width: 305px;
    position: absolute;
    left: 20px;
    top: 30px;
}