Comment Faire iframe 100% de la hauteur en fonction de son contenu
J'avais vu beaucoup de gens qui demandent comment faire iframe 100% de la hauteur. Qui peut facilement être archivés à l'aide de CSS. Il fera l'iframe d'affichage de 100% par rapport à l'écran de l'appareil. Mais comment faire iframe 100% de la hauteur en fonction de son contenu?
Voici mon code actuel, de faire 100% de l'iframe en fonction de l'écran du périphérique:
CSS:
iframe {
display: block;
background: #000;
border: none;
height: 100vh;
width: 100vw;
}
HTML:
<iframe src="https://...">Your Browser Does Not Support iframes!</iframe>
La allowfullscreen
et position:absolute
n'aide pas, sauf pour le fracas de mon site modèle. C'est le mieux que je puisse faire sans le fracas de la primaire CSS. S'il vous plaît aider...
Edit: Le contenu de l'iframe est réactive à l'aide de
<meta name="viewport" content="width=device-width,initial-scale=1">
afin de hauteur prédéfinie à l'aide de javascript ne fonctionne pas trop. Peut-être est-il un moyen de l'utilisation d'unités de hauteur à la place?
em
, ex
, rem
etc? Ou faire un pourcentage spécifique de vw
?
- cela fonctionne pour moi dans la dernière version de chrome. Quel navigateur utilisez-vous?
- Je suis en utilisant google Chrome et Safari
Vous devez vous connecter pour publier un commentaire.
Il n'y a pas de CSS seule façon de définir la hauteur de l'iframe en fonction de son contenu.
Vous avez besoin d'utiliser le JavaScript pour obtenir iframe contenu de la hauteur et alors définie comme la hauteur de l'iframe.
comment réaliser cela à l'aide de JavaScript répondu et bien expliqué dans les questions suivantes:
faire iframe hauteur dynamique basée sur le contenu à l'intérieur - JQUERY/Javascript
Redimensionner l'iframe de contenu avec Jquery
Ajuster la largeur de la hauteur de l'iframe pour s'adapter avec le contenu en elle
inter-domaine iframe resizer?
Essayer de mettre
position
àfixed
, comme ceci:Ou comme ceci:
iframe
.