iframeで自動調整可能な高さの別のサイトからページを読み込む

Question

私は2つのブログを持っています。私はそれらをリンクする必要があります。 'website1.com'の

'one.html'が'website2.com'を表示すべきではない'website2.com'.

アドレスをロードする必要があり、その代わり、それは'website1.com/one.html'が表示されるはずです。

コンテンツをカットせずにスクロールする必要があります（コンテンツの高さ/投稿の数に基づいて高さを自動調整します）が、スクロールバーは表示されません。

私はiframeを作成し、スクロールバーも隠すことができましたが、高さを自動調整しませんでした。完全なコンテンツを表示しないか、半分のコンテンツを表示します。

これを行うには、適切なHTML、CSS、および/またはJavascriptコードを入力してください。

ありがとうございます。

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> 

デモ：https://jsfiddle.net/umd2ahce/6/