iframe to load page from another site with auto adjustable height

Question

I have two blogs. I need to link those.

'one.html' of the 'website1.com' should load the 'website2.com'.

The address 'website2.com' should not be displayed, instead, it should show 'website1.com/one.html' .

It has to scroll without cutting the content (auto adjust height, based on the content/no. of posts) but scroll bar should not be visible.

I created an iframe and was able to hide the scroll bar as well, but it did not auto adjust the height. Either it does not show full content or shows half content.

Please provide the appropriate HTML , CSS , and/or Javascript code to do the same.

Thanks in advance.

Answer 1

<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>

Demo : https://jsfiddle.net/umd2ahce/6/