Высота дочернего элемента div (содержит iframe) - решающая проблема - PullRequest
Новая
       13

Высота дочернего элемента div (содержит iframe) - решающая проблема

0 голосов
/ 07 ноября 2019

У меня довольно простой код, и я потратил день на решение проблемы, но все еще не продвинулся: / Я хочу отобразить iframe с background-image. Фрагмент кода не показывает фоновое изображение, поэтому вы можете увидеть живое демо здесь: http://lukdan2.47.pl/index2.php

.parrent {
  width: 100%;
  background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  max-width: 427px;
}

.child {
  margin: 0 auto;
  position: relative;
  width: 73%;
  padding-top: 37%;
}

iframe {
  border: none;
  width: 100%;
  height: 100%;
  margin: 0;
}
<div class="parrent">
  <div class="child">
    <iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
  </div>
</div>

Как видите, у iframe слишком большая высота. Я могу добавить 

.child {
    margin: 0 auto;
    position: relative;
    width: 73%;
    padding-top: 37%;
    height: 550px;
    padding-bottom: 37%;
}

и работает нормально.

Но для экрана ниже 460px родительский div становится меньше, поэтому статическая высота для дочернего элемента работает неправильно.

Я пытался изменить родительский div для отображения flex и table (и также изменить дочерний div), но ничего не найдено, что решило бы мою проблему.

Помогите, пожалуйста.

1 Ответ

0 голосов
/ 08 ноября 2019

Хорошо, я нашел решение. 

.iframe-container {
  padding-top: 56.25%;
  position: relative;
  background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

 
.iframe-container iframe {
border: 0;
height: 62%;
left: 40%;
position: absolute;
top: 0;
width: 20%;
margin: 0 auto;
padding-top: 11%;
padding-bottom: 0%;
}
 
<div class="iframe-container">
  <iframe src="http://sshtest.co.pl/"></iframe>
</div>
...