応答するiframe div

Question

私には2 divがあります。固定された左側のdivともう1つのdivは、ロードするウェブサイトがあるiframeです。

私はiframedivに反応します。私は、すべてのウェブサイトのコンテンツがその特定のウェブサイトにあることを願っています。div（その特定のウェブサイトが応答性がある場合）。

.left_side_div { 
 
    float: left; 
 
    width: 150px; 
 
    height: 100%; 
 
    position: fixed; 
 
    background: #f6f8f8; 
 
} 
 

 
.website_contain_main_div { 
 
    position: relative; 
 
    left: 151px; 
 
} 
 

 
.website_contain_main_div .website_contain_div { 
 
    float: left; 
 
    height: 100vh; 
 
    min-width: 100%; 
 
    overflow: hidden; 
 
}

<div class="left_side_div"></div> 
 
<div class="website_contain_main_div"> 
 
    <div class="website_contain_div"> 
 
    <iframe class="no_border" src="http://html.com/tags/iframe/" width="100%" height="100%"></iframe> 
 
    </div> 
 
</div>

すべてのヘルプは素晴らしいことです。

Answer 1

は割合に基づく決議を使用することを検討して

.left_side_div { 
 
    float: left; 
 
    width: 150px; 
 
    height: 100%; 
 
    position: fixed; 
 
    background: #f6f8f8; 
 
} 
 

 
.YourIframeClass { 
 
    position: relative; 
 
    padding-bottom: 65.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: auto; 
 
    -webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/ 
 
    border: solid black 1px; 
 
} 
 

 
.YourIframeClass iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class='left_side_div'> 
 
LEFT DIV 
 
</div> 
 
<div class='YourIframeClass'> 
 
    <iframe class="no_border" src="http://html.com/tags/iframe/"></iframe> 
 
</div>

Answer 2

このソリューションをお試しください。

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

.left_side_div { 
    width: 10%; 
    height: 100%; 
    position: fixed; 
    background: #f6f8f8; 
} 

.website_contain_main_div { 
    position: relative; 
    left: 10%; 
    width: 90%; 
} 

はここhere

Answer 3

使用フレキシボックスを参照してください。デモ：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    /* become flex-container */ 
 
    /* its direct children will be flex items */ 
 
    /* by default flex-items stretch to container height */ 
 
    display: flex; 
 
} 
 

 
.left_side_div { 
 
    width: 150px; 
 
} 
 

 
.website_contain_main_div { 
 
    /* occupy remaining width */ 
 
    flex: 1; 
 
} 
 

 
.website_contain_div { 
 
    height: 100%; 
 
} 
 

 
.website_contain_div > iframe { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="left_side_div"></div> 
 
<div class="website_contain_main_div"> 
 
    <div class="website_contain_div"> 
 
    <iframe class="no_border" src="http://html.com/tags/iframe/"></iframe> 
 
    </div> 
 
</div>