iframe div响应

Question

我有2 div。一个有固定左侧div而另一个div有iframe，其中要加载网站。

我希望iframe div能够做出回应。我的意思是，我希望所有网站内容都在特定的div内（如果该特定网站有响应）。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何帮助都会很棒。

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

在这里使用flexbox。演示：

＆＃13;

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;