javascript - iframe 被屏幕截了一半

Question

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

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

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>

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

标签： javascripthtmlcssiframegoogle-calendar-api

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>