iframe是屏幕的一半切割

问题描述 投票:0回答:1

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

我的iframe是Google日历和来自[fromcast.io]的meteo框架。我想制作具有最小高度的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>

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

javascript html css iframe google-calendar-api
1个回答
0
投票

这是一个使用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>
© www.soinside.com 2019 - 2024. All rights reserved.