Javascript iframe以自动调整高度从另一个站点加载页面

我有两个博客。我需要把这些联系起来

'website1.com'

的

'one.html'

应加载

'website2.com.

不应显示地址

'website2.com'

，而应显示

'website1.com/one.html'

它必须在不剪切内容的情况下滚动（根据帖子的内容/数量自动调整高度），但滚动条不应可见

我创建了一个

iframe

，并且能够隐藏滚动条，但是它没有自动调整高度。它要么不显示全部内容，要么显示一半内容

---

请提供相应的

HTML

，

CSS

，和/或

Javascript

代码来执行相同操作

提前感谢。

<style>
 #support-box {
        width: 50%;
        float: left;
        display: block;
        height: 20rem; /* is support box height you can change as per your requirement*/
        background-color:#000;
    }
    #wrapper {
        width: 90%;
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
         background:#ddd;
       margin:auto;
       height:100%; /* here the height values are automatic you can leave this if you can*/

    }
    #wrapper iframe {
        width: 100%;
        display: block;
        padding:10px;
        margin:auto;
    }
</style> 
<div id="content" >
    <div id="support-box">
        <div id="wrapper">
            <iframe name="frame" id="frame" src="website2.com" frameborder="0"></iframe>
        </div>
    </div>
  </div>

#支撑箱{
宽度：50%；
浮动：左；
显示：块；
高度：20rem；/*是可根据需要更改的支撑箱高度*/
背景色：#000；
}
#包装纸{
宽度：90%；
显示：块；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
背景：ddd；
保证金：自动；
高度：100%；/*此处的高度值是自动的，如果可以，您可以保留此值*/
}
#包装器iframe{
宽度：100%；
显示：块；
填充：10px；
保证金：自动；
}

---

演示：

请提供您尝试过的适当HTML、CSS和/或Javascript代码，以便我们检查您出现错误的原因。website2可能与website1相同吗？