Redimensionner dynamiquement une IFRAME

**Yepazix** · 03/02/2020, 11h56

Bonjour,

Ce post est un peu la suite d'un autre post que j'ai fait au sujet de iframe.
J'ai utilisé Iframe (et un peu include aussi) pour intégrer un mini site Web dans une page wordpress (visible ici : https://www.imagiscene.com/agenda/).

Ca fonctionne très bien sauf que je ne comprends pas comment se comporte Height.

Le code dans ma page Wordpress est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <head>
    <style>
        #imgEtire{
    height : 100em;
    border : 300 px solide #CCC;
    Width : 100%;
    min-width : 20em;
}
</style>
</head>
<body>
   <iframe id="imgEtire" sandbox src="https://www.espaceimagi.com/_agenda_/agenda.php" alt=""> </iframe> 
</body>

Avec la valeur dans Height ont devrait donc pouvoir définir la taille du frame.

Si j'indique une valeur en em ou en pt ça fonctionne nickel, plus la valeur est grande, plus le frame est "long". Logique.
Par contre en % ça ne fonctionne pas ! Quelle que soit la valeur indiquée je n'ai qu'une toute petite fenêtre.
J'ai essayé aussi des trucs comme auto ou inherit mais la aussi la frame reste petite.

Moi ce que je voudrais c'est que la frame fasse la taille de son origine.
--> S'il y a 2 évent's qu'elle soit toute courte et s'il y en a 50 qu'elle soit longue assez pour voir les 50 éléments et bien sur sans ascenseur.

Mais est ce possible ?

Merci d'avance de votre aide.

**Yepazix** · 06/02/2020, 01h04

La question est-elle débile ? Ou alors c'est impossible ?

**NoSmoking** · 06/02/2020, 08h58

Bonjour,
une réponse partielle t'a été fournie dans ton autre discussion, avec lien à suivre, et notamment

Point #4

En ce qui concerne Height, si je met des valeurs pt ou em ça fonctionne, plus la valeur est grande plus la fenêtre est longue... logique. Par contre si je met 100% je n'ai en hauteur que l'équivalent d'un évent.

Par défaut les <iframe> prennent comme valeurs height:150px et width:300px c'est comme cela sur tous les navigateurs, si l'on ne redéfinie pas l'une d'elles c'est donc la valeur par défaut qui est prise en compte.

concernant la valeur exprimée en pourcentage, ce pourcentage est calculé par rapport aux dimensions du bloc conteneur qu'il faut donc dimensionner.

**Yepazix** · 06/02/2020, 12h06

Oui, ça j'ai compris :-).
Enfin je crois...
J'ai voulu faire un %tage en croyant que ça me donnerait un %tage de ma "source" --> 100% = toute ma source.
Mais en fait ça me donner un %tage de ma destination.
C'est bien ça ?

Mais du coup mon problème reste entier.
Est ce que je sais d'une manière ou d'une autre "étirer" ma zone de destination en fonction de la taille de ma zone de source ?

Merci de ton aide.

**NoSmoking** · 06/02/2020, 17h38

Est ce que je sais d'une manière ou d'une autre "étirer" ma zone de destination en fonction de la taille de ma zone de source ?

La réponse à ta question est non puisque tu la poses

Plus sérieusement si tu veux adapter la hauteur de ton <iframe> à son contenu il te faut passer par du JavaScript à condition que les deux pages soient sur le même domaine, mais pas en triturant le CSS, on pourra en reparler.

Pourquoi ne pas passer par un include voir une « page template » qui sont des solutions plus robuste et propre ?

**Yepazix** · 07/02/2020, 03h21

Parce que insérer du HTML dans une page WP c'est niveau 1ère primaire.
Tu met le widget HTML sur la page la ou tu veux, tu met ton HTML dans la case correspondante et c'est fini :-)

Un include c'est déjà "un peu plus compliqué" si l'approche est la même, à savoir utiliser un add ou un widget pour Wordpress dans une page Elementor.
J'ai essayé et j'ai été confronté aux même problèmes qu'avec le iframe.

Je suppose qu'il reste donc la solution de la page template.
Elle me fait peur pour deux raisons.

1/ Je ne suis pas sur du tout d'avoir le niveau pour faire une page template.
2/ Il faudrait que je puisse fournir quelque chose de simple à mettre en place.
--> Pour mon site www.imagiscene.be pas de souci, je peux faire tout ce que je veux, mais en fait c'est plus en test qu'autre chose.
Au final le but est de fournir une solution testée et portable sur un autre site WP qui pourrait utiliser le même principe mais en utilisant son Layout de base.

Maintenant il y a peut être encore d'autres approches aux quelles je n'ai pas pensé ?

Redimensionner dynamiquement une IFRAME

JavaScript

Vue hybride

Discussions similaires

Partager

Partager