[RÉGLÉ] Iframe hauteur responsive dans un article

[clncln]

Bonjour à tous,

J'essaye intégrer un iframe responsive dans un article.
Dans cette iframe, je pointe vers l'url d'un autre site.
Mon problème est que je n'arrive pas à obtenir la bonne hauteur pour cet iframe, un ascenseur vertical apparait alors que je n'en veut pas.

Pouvez-m'aider à résoudre ce problème ?

Merci.

[lomart]

Bonjour,

Quel code utilisez-vous ?
Une URL pour voir le problème ?

[clncln]

Bonjour Iomart,

Difficile de joindre une URL pour l'instant, en effet je teste sur mon site de test avant de publier en ligne.

Sinon dans mon article j'ai inséré le code suivant :
<p>
<iframe src="https://www.donnerenligne.fr/burkina-sante/faire-un-don" id="haWidget"></iframe>
</p>


Dans mon fichier CSS j'ai mis le code suivant :

#haWidget{
width : 95%;
min-height: 800px;
overflow: hidden;
border: none;
background: #E3C3AA;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:20px;
margin-top: 40px;
margin-left:10px;
}

Mon soucis est la hauteur de l'iframe qui ne s'adapte pas.
J'aimerai que le contenu de l'iframe, donc le formulaire appelé, s'affiche entièrement dans mon article.

Espérant avoir été clair sur l'exposé de mon problème.

Cordialement.

[lomart]

L'ascenseur est sur #haWidget ou sur le bloc inclus ?

[clncln]

L'ascenseur est sur #haWidget, voir image jointe.

[lomart]

A la sauvage en augmentant min-height de ##haWidget, cela donne quoi ?

[clncln]

En augmentant le min-height j'arrive effectivement à augmenter la hauteur de l'iframe et ainsi à supprimer l'ascenseur.
Par contre si je réduit la largeur de mon explorateur, le contenu de l'iframe passe de 3 à 1 colonnes et là l'ascenseur réapparait.

J'ai mis mes modifications en ligne, site www.burkina-sante.org, menu nous soutenir puis faire un don en ligne.

[lomart]

Tentez de mettre overflow:visible

Par contre si je réduit la largeur de mon explorateur, le contenu de l'iframe passe de 3 à 1 colonnes et là l'ascenseur réapparait.

Ca se règle à coup de media-queries

[USER="80685"]media[/USER] (max-width:760px ) {
  #haWidget {min-height:2500px;}
}

[clncln]

Super, j'ai réussi à modifier la hauteur de l'iframe en fonction de la taille de l'écran grâce au "media-queries".

Merci Iomart.