Question

我试图在屏幕上显示2个iframe，并使它们响应设备屏幕。

我的iframe是[fromcast.io]的Google日历和气象框。我想根据需要使meteo框架具有最小的高度，并用日历填充所有其他空间，但是我很迷失。

function setFocus() {
  var iframe = document.getElementById("kallender");
  iframe.contentWindow.focus();
}

setFocus();

.responsiveCal {
  position: relative;
  /*
    padding-bottom: 75%;
  */
  height: 0;
  overflow: auto;
}

.responsiveCal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<br>
<div class="responsiveCal">
  <iframe src="https://calendar.google.com/calendar/embed?src=xx%40gmail.com&ctz=Europe%2FZurich" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no" id="kallender">
        </iframe>
  <p> oaksdokdosak </p>
  <br>
  <br>
  <br>
  <iframe style="align:left" id="forecast_embed" type="text/html" frameborder="0" height="25%" width="100%" src="http://forecast.io/embed/#lat=46.80237&lon=7.15128&name=Fribourg&units=ca">
      </iframe>
</div>

我也不知道为什么我的代码段在这里不起作用...

Answer 1

以下是使用calc()作为压光机高度的解决方案：

window.onload = function() {
  var iframe = document.getElementById("kallender").contentWindow.focus();
};

html,
body {
  margin: 0;
  height: 100%;
}

iframe {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: none;
}

#kallender {
  height: calc(100% - 270px);
}

#forecast_embed {
  height: 230px;
}

<iframe id="kallender" src="https://calendar.google.com/calendar/embed?src=xx%40gmail.com&ctz=Europe%2FZurich" frameborder="0" scrolling="no" ></iframe>
<iframe id="forecast_embed" src="https://forecast.io/embed/#lat=46.80237&lon=7.15128&name=Fribourg&units=ca"></iframe>

iframe被屏幕切掉了一半

1 个答案: