1
votes

Comment puis-je utiliser flex pour rendre l'iframe extensible en plein écran?

Je ne peux afficher toute ma hauteur iframe que si je code la hauteur en dur à 1000 px, mais la définition de la hauteur à 100% ne fonctionne pas. Pour une raison quelconque, la largeur s'étire à 100%, mais pas la hauteur. Si j'essaie d'attribuer 100% à la classe .full-width, l'iframe ne s'affiche tout simplement pas. Je recherche l'iframe pour s'étirer à la taille réelle de la fenêtre pour différentes tailles d'écran également.

.fullheight-container {
  height: 100%;
  max-height: 100%;
}

.flex {
  display: flex;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-v-arrange {
  flex-direction: column;
}

.full-width {
  width: 100%;
  height: 1000px;
}

<div class="fullheight-container">
  <div class="flex flex-auto flex-v-arrange">
    <div class="flex flex-auto">
      <iframe #window1 class="full-width" allowfullscreen="true" frameborder="0"
        src="/source/iframe"></iframe>
    </div>
  </div>
</div>

html css flexbox iframe

1 commentaires

avez-vous essayé width: 100vw; height: 100vh ?

3 Réponses :

1
votes

Ensemble: width: 100vw; ou height: 100vh; pour la hauteur.

0 commentaires

0
votes

Est-ce ce que vous recherchez?

J'ai défini ce qui suit sur votre conteneur parent:

<div class="fullheight-container">
  <iframe #window1 class="full-width" allowfullscreen="true" frameborder="0" src="/source/iframe"></iframe>
</div>

et définir la height/width: 100%; sur la classe pleine largeur.

display: flex supplémentaire display: flex à votre conteneur parent.

.fullheight-container {
  max-width: 100%;
  max-height: 100%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.full-width {
  min-width: 100%;
  min-height: 100%;
  background: black;
}

width: 100vw;
height: 100vh;

2 commentaires

Merci, cela semble fonctionner. Cependant, je vois toujours une barre de défilement sur la droite, où je voudrais que cela ne soit pas là. Est-il possible de s'en débarrasser?

Voir mon extrait de code mis à jour. J'ai supprimé une partie de votre code car nous travaillons principalement avec le div parent et l'iframe.

0
votes

Les iframes ne permettent pas une hauteur automatique. La hauteur doit être une valeur fixe. Comme mentionné, vous pouvez utiliser 100vh comme hauteur. Alternativement, vous pouvez calculer la hauteur nécessaire de l'iframe. Pour cela, vous devez utiliser JS. utilisez ceci pour le contenu iframes:

<iframe id="superFrame" src="" style="width: 100%; border: none;" onload="resizeIframe(this)" scrolling="no">Alternative</iframe>
<script type="text/javascript">
  window.addEventListener('message', function(e) {
    var iframe = document.getElementById('superFrame');
    var eventName = e.data[0];
    var height = e.data[1];
    switch(eventName) {
      case 'setIframeHeight':
        iframe.height = height;
        break;
    }
  }, false);
</script>

Ensuite, vous devez ajouter une ligne de code correspondante avec JS dans la page qui contient l'iframe lui-même:

<body onLoad="resizeParent();">
  <script type="text/javascript">
    function resizeParent() {
      var height = document.getElementsByTagName("html")[0].scrollHeight;
      window.parent.postMessage(["setIframeHeight", height], "*");
    }
  </script>
  
  <!-- Content here -->
</body>

0 commentaires