iframe是屏幕的一半切割

Posted 2021-05-06

我正在尝试在屏幕上显示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>

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

答案

这是一个使用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是屏幕的一半切割的主要内容，如果未能解决你的问题，请参考以下文章

使用viewpager时，片段不会全屏显示

片段被视图分页器布局切割

如何打印（在屏幕上）带有外部 url 的 iframe 所需的所有 JS 代码

结合两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后将 iframe src 替换为转换后的 url

处理屏幕旋转上的片段重复（带有示例代码）

支持动态或静态片段的不同屏幕尺寸？