如何在html中将div附加到特定维度

我正在为一个应用程序开发一种可视化模拟器

以下是我想要的：

上图是iphone的线框。我想在iphone屏幕的边界内插入一个div或任何其他元素

我确实在搜索iframe。但是html5不支持scrollview。所以我在寻找另一种方法

我正在使用bootstrap 3，希望它能够响应（仅供参考）

编辑 所以我尝试了索维特的答案：

这是我的HTML的一部分：

<div id="page" class="row">
    <div id="iOS" class="col-md-6">
        <div id="iphone-wireframe" class="container">
            <div class="content">
                <h1>This is heading</h1>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
            </div>
        </div>
    </div>

当它被调整时，结果是完美的。它也有响应，但图像和文本没有同步响应。我不知道如何用文字来解释这一点，所以我将仅通过图片显示：

完美时：

当不那么完美时：

---

您可以将图像设置为容器元素的背景，然后向其添加填充以向内推动内容，直到其符合边界

*{
框大小：边框框；
}
.集装箱{
宽度：500px；
高度：800px；
填充：50px 100px；
背景：#CCC；
}
.内容{
身高：100%；
背景：#FFF；
溢出：自动；
}

这是标题
这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容这是一些内容

有样本代码吗？你试过什么？我们不会为您编写代码，如果您尝试这样做，请发布您的尝试。我确实提到我想到了iframe，并且根据W3Doc，它不支持在HTML5中滚动。我不是要求任何人给我这方面的代码，我只是要求在正确的方向上的指针或想法。如果你真的有这种想法，我会编辑我的问题。@AdambuchanTransmisth:我已经尝试在Soviut的回答的帮助下更新了我的问题。我已经更新了我的问题，还有一些问题。我可能应该将此标记为答案，但是我想知道您对我的编辑的看法。@GauravPandey您面临的问题是图像的缩放比例与您的百分比不同。您需要做的是确保DIV始终按比例缩放。您可以使用div ratio css技巧来实现这一点，我想我可以将其添加到答案中。

.container {
    width: 65%;
    height: 90%;
    margin-top: 40px;

    background-image: url("/assets/res/img/iPhone-wireframe.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.content {
    margin: 81px auto auto;
    width: 67.5%;
    height: 75.5%;
    background: #FFF;
    overflow: auto;
}