Iframe наполовину обрезан экраном - PullRequest
Новая
       11

Iframe наполовину обрезан экраном

0 голосов
/ 07 сентября 2018

Я пытаюсь отобразить 2 фрейма на моем экране и заставить их реагировать на экран устройства.

Мои фреймы - это календарь Google и метеокадр из [fromcast.io]. Я хочу сделать метео-кадр с минимальной высотой, насколько это необходимо, и заполнить все остальное пространство календарем, но я довольно растерялся. 

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>

Я также не знаю, почему мой фрагмент не работает здесь ...

1 Ответ

0 голосов
/ 07 сентября 2018

Вот решение, которое использует 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>
...