Hauteur automatique d'iframe

**kap** · 21/08/2013, 14h31

Bonjour à tous !!

Ca fait longtemps que je n'ai pas fait de CSS et l'usage a été relativement limité. Je dois faire du responsive design. J'ai d'abord effectué mon design pour desktop et j'essaye maintenant de l'adapter aux smartphones.

Voici la structure du HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
<h1>Démo Media Queries</h1>
<div id="main">
	<div id="menu">
		<ul>
			<li onclick="update_iframe("url")"onmouseover="this.children[0].src='icones/multi_48.png'" onmouseout="this.children[0].src='icones/jaune_48.png'">
				<img src="icones/vert_48.png">
				<a href="#">Solidarité</a>
			</li>
			<li onclick="update_iframe("url")"onmouseover="this.children[0].src='icones/multi_48.png'" onmouseout="this.children[0].src='icones/noir_48.png'">
				<img src="icones/vert_48.png">
				<a href="#">Solidarité</a>
			</li>
			<li onclick="update_iframe("url")"onmouseover="this.children[0].src='icones/multi_48.png'" onmouseout="this.children[0].src='icones/orange_48.png'">
				<img src="icones/vert_48.png">
				<a href="#">Solidarité</a>
			</li>
			<li onclick="update_iframe("url")"onmouseover="this.children[0].src='icones/multi_48.png'" onmouseout="this.children[0].src='icones/rouge_48.png'">
				<img src="icones/vert_48.png">
				<a href="#">Solidarité</a>
			</li>
			<li onclick="update_iframe("url")"onmouseover="this.children[0].src='icones/multi_48.png'" onmouseout="this.children[0].src='icones/vert_48.png'">
				<img src="icones/vert_48.png">
				<a href="#">Solidarité</a>
			</li>
		</ul>
	</div>
	<iframe
	</iframe>
</div>

Les balises [li] sont générées par javascript à partir d'un fichier JSON. Je ne connais donc pas à priori le nombre de rubriques de mon menu.
Je rencontre un problème pour spécifier la taille de mon iframe. Lorsque je mets une taille fixe (500px), elle s'affiche bien. Lorsque je la mets en pourcentage, elle a une hauteur réduite et est du coup illisible.
Voici mon code CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@media screen and (max-device-width: 320px){
body {
	font-family:Sans-serif;
	font-size:40px;
}
 
	#main {
		width:100%;
		height:100%,
		background:#FFFFFF;
		display:block;
	}
	#menu {
		width:100%;
		clear:none;
	}	
	#menu li {
		width:8em;
		background:#FFFFFF;
		display:block;
		float:left;
		text-align:left;
	}
	#iframe {
		display:block;
		overflow: hidden;
		width:100%;		
		height:auto;
		float:none;
		clear:none;
 
	}
}

Que puis-je faire pour m'en sortir?

Merci d'avance !!

**Torgar** · 21/08/2013, 14h48

Il y a déjà un souci de quote et double quote : onclick="update_iframe("url").

Ca devrait plutôt être : onclick="update_iframe('url').

Ensuite, tu n'aurais pas une page en ligne pour que l'on voie mieux le problème ?

**kap** · 21/08/2013, 15h00

Merci pour ton aide !!

J'ai mis "url" pour simplifier l'affichage du code. Dans mon javascipt, je fais :

Code :

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

1
2
3
4
5
	var li = document.createElement('li');
	var onclick = document.createAttribute("onclick");
	var str = "update_iframe(\"" + menulist[rubrique].carte + "\")";
	onclick.value=str;
	li.setAttributeNode(onclick);

Ce code marche bien, pas de soucis là-dessus.
Je n'ai malheureusement pas de version en ligne pour vous faire tester.

Si je mets une taille en px ou en em, l'iframe l'accepte bien. Si je veux mettre des pourcentages, ce qui dans mon cas me semble plus adapté, ça ne marche pas... J'ai fait une capture d'écran : en dessous de mes rubriques, j'ai bien mon iframe (text area de recherche), mais je suis sensé avoir une carte en dessous.

**Torgar** · 21/08/2013, 15h09

Il n'en reste pas moins que cela devrait être des simples quote, ou alors je passe à côté d'un truc.

**kap** · 21/08/2013, 15h16

Le simple quote fonctionne aussi. Quelle est la différence entre les deux?

**kap** · 21/08/2013, 17h07

J'ai pu finalement le mettre en ligne : http://wgs3.s3.amazonaws.com/perso/dlecole/index.html

Sous mon Iphone ça passe en mettant des pourcentages donc ça doit peut être un problème venant de l'émulateur ou un problème de navigateur...

Invité · 22/08/2013, 08h24

Bonjour,

Code CSS :

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

html { width:100%; height:100%; min-height:100%; }

Hauteur automatique d'iframe

Dimensionnement en CSS

Discussions similaires

Partager

Partager