[HTML] Problème avec DIV, impossible de mettre la hauteur à 100% !!

**keyser.greg** · 27/02/2006, 13h04

Bonjour,

voici un problème que je n'arrive pas à résoudre depuis un moment !!
En fait, je veux que seule ma partie centrale soit "scrollable". Du coup, j'ai opté pour une iframe. Mais voyant tous les inconvenients que cela représentait, j'ai choisi de passer par un DIV.
Seulement je n'arrive pas a mettre la hauteur de ce div a 100%. Je ne sais pas pourquoi mais il ne s'adapte pas à la table parente. Lorsque je regle la taille du div en dur dans le css ( ex : "height:750px;" ), le resultat est parfait en 1200*1024, mais se deteriore en cas de changement de résolution ou retrecissement de le fenetre.
Lorsque je met "height:100%;", si la partie centrale (le div) est plus grande que la table parente, le scroll se trouve sur la fenetre, alors ke selon moi, grace au "overflow: auto;", le div devrait avoir comme taille maximale la taille de la table parente et y ajouter un scroll si la taille du div depasse celle ci.
Je ne suis pas un pro du tout, donc veuillez m'excuser si cette question est stupide, ou si ce problème vient de mon code.

Voici le code de ma page :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>------</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
  height:100%;
  width:100%;
  margin: 0;
  padding: 0;
}
#centpourcent {
  height: 100%;
  width:100%;
  }
  #container{
        width:100%;
        overflow: auto;
        padding-right: 15px;
        height:100%;
}
-->
</style>
<body>
<table id="centpourcent" cellpadding="0" cellspacing="0" bgcolor="#000000">
	<!-- title="haut" -->
	<tr>
		<td width="180" height="30" valign="top" >&nbsp;</td>
		<td width="*" height="30" align="center">
			<? include 'heure.php'; ?>
		</td>
	</tr>
 
	<!-- title="centre" -->
	<tr valign="top">
		<!-- title="centre : Menu" -->
		<td width="180" align="center" valign="top">
			<table width="180" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0">
				<? include 'menu_accueil.php'; ?>
			</table>		
	    </td>
		<!-- title="centre : Page" -->
    	<td width="100%" bgcolor="#006699">
			<table id="centpourcent" cellpadding="0" cellspacing="0" >
				<tr>
					<td width="20" height="20" valign="top"><img src="images/coin_hg.jpg"></td>
					<td width="*" height="20">&nbsp;</td>
					<td width="20" height="20" align="right" valign="top"><img src="images/coin_hd.jpg"></td>
				</tr>
				<tr>
					<td width="20" height="*">
					</td>
					<td align="center" valign="top">
						<div id="container"> 
							<? include 'accueil.php'; ?>
						</div>
					</td>
					<td width="20" height="*">&nbsp;</td>
				</tr>
				<tr valign="bottom">					
					<td width="20" height="20"><img src="images/coin_bg.jpg"></td>
					<td width="*" height="20">&nbsp;</td>
					<td width="20" height="20" align="right"><img src="images/coin_bd.jpg"></td>					
				</tr>			
			</table>
		</td>
		<!-- title="centre : Droite" -->
		<td width="50">&nbsp;&nbsp;&nbsp;</td>
	</tr>
	<!-- title="bas" -->
	<tr>
		<td width="180" valign="bottom" height="30">&nbsp;</td>
		<td width="*" align="center">
			<span class="Style1">&copy;&nbsp;Site 2005</span>
		</td>
		<td width="50" valign="bottom" height="30" align="right">&nbsp;</td>
	</tr>
</table>
</body>
</html>

Merci à tous !

N'hesitez pas a me demander des précisions sur mon problème, si je me suis mal exprimé, ou si il manque du code.[/code]

**narnou** · 27/02/2006, 13h17

J'ai pas mega super etudié ton pb, mais ce qui est sur c'est que ca "overflowera" jamais si ton div n'as pas une taille fixe...

**keyser.greg** · 27/02/2006, 13h50

Merci pour ta réponse.

comment faire alors pour que mon div prenne toute la taille (surtout la hauteur) de la table dans laquelle il est ??
Je peux pas mettre une taille fixe à mon div, ca sert à rien dans mon cas !

Si vous avez une autre solution à me proposer je ne suis pas contre !

Merci

**gondek** · 03/03/2006, 22h38

J'ai un problème plus ou moins similaire...

Quand j'exprime la hauteur en pourcentage, elle ne se met pas correctement.

Par contre, quand elle est exprimée en pixel, pas de soucis!!!

C'est bizzare...

**difficiledetrouver1pseudo** · 04/03/2006, 11h47

j'ai également le même problème.

c'est seulement sous FF que j'ai le problème sous IE aucun pb.

voici la page :
http://j.miot.free.fr/new/

le code CSS est le suivant :

Code :

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

1
2
3
4
5
6
7
8
#contenu{
	height: 100%;
	width: 100%;
	left: 0px;*/
	padding-top: 8em; 	/* pour garder la place au menu */
	padding-bottom: 3em; 	/* pour garder la place au pied de page */
	overflow: auto; 		/*barre de defilement auto*/
}

effectivement si l'on donne une hauteur fixe ca contourne le problème mais bon c'est pas une solution, il serait bien que ca soit fluide.

est ce que quelqu'un connait une astuce?

**azertyman** · 04/03/2006, 14h26

Pour firefox dans ton css :

Code :

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

min-height : 500px

**difficiledetrouver1pseudo** · 04/03/2006, 21h47

j'ai rajouté ton code mais cela n'a pas modifier le comportement de la page.

toujours le problème.

pourquoi cela pourrait il corriger le problème de barre de défilement?

**keyser.greg** · 05/03/2006, 12h31

Merci pour vos réponses, mais je ne sais toujours pas comment régler ce problème !!

Merci encore

**gonnarule** · 06/03/2006, 02h22

Je fais aussi ce genre de truc et c la galère tout pareil.
Par contre j ai noté que j avais le meme type de bug, et qu'en séparant html et body dans mon css un de mes pb s'est résolu (miracle !) Dans mon cas mes div "enfants" dépassaient de mon div "parent" (sans forcage top left etc)..j ai séparé body et html et c rentré dans l ordre.. mais bon.. a tenter

**Matt_Rhapso** · 07/04/2006, 17h46

Le problème c'est que la hauteur n'est pas définie sur une page web. Du coup ton "height = 100%" ne peut pas fonctionner.

Voilà l'astuce que j'utilise :

Code :

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

1
2
3
 
heightNav =  window.innerHeight
document.getElementById('monBody').setAttribute('height', heightNav + 'px')

En fait je récupère la taille de la fenêtre interne du navigateur et ensuite je l'applique au style de la balise body qui a pour id "monBody".
Toutes mes autres définitions CSS ont leur "height" exprimés en pourcentage et ça fonctionne bien.

Ca fonctionne sous FireFox, je n'ai pas encore testé sous IE...

**hakurou** · 27/02/2007, 08h31

alors déja, tu as mis un doctype, tres bien, mais le doctype te forces a faire les choses selon les normes!

les normes disent que les feuilles de style doivent obligatoirement être entre <head></head>, dans ta feuille tu as oublié de fermé le tag <head>

normalement ta feuille marche avec ca (selon ce que j'ai testé), si ca ne marche pas, essaie de faire une feuille de style externe puis au lieu de <style type....> ecris plutot
<link href="nom_du_fichier.css" rel="stylesheet" type="text/css"> (oui car chez moi avec <style type....> des fois ca marche pas alors que l'autre fonctionne, allez savoir!)

**trotters213** · 27/02/2007, 13h18

Pour continuer ce qu'a dit hakurou :
Passe ton site au validateur HTML du W3C ainsi tu verras déjà toutes les fautes syntaxiques de ton code.
Quand tu ouvres des balises php fait <?php et non pas <?.
Les tableaux ne sont pas fait pour faire de la mise en page donc je ne saurai que trop te conseiller la mise en page à base de div et de feuille de style CSS.
Pour ce qui est de la hauteur de ton div, essaie de donner une taille en dur à ton tableau (si tu souhaites rester avec des tableaux) et laisse ton height:100%; dans container.

**speedev** · 27/02/2007, 16h20

J'ai pas tout lu en détail mais pour pouvoir utiliser le height:100% sur IE tu dois supprimer ton doctype et ça marchera. Si tu n'y tiens pas tu dois utiliser les propriétés min et max-height sur FF et faire un hack ou deux pour IE (regarde sur le ouèb).

Tchao

**hakurou** · 28/02/2007, 14h33

alors je viens de lire ce forum:
http://www.developpez.net/forums/sho...ht+pourcentage

c'est le même principe si ce n'est que c'etait avec des <div> et nom du <table>, pour que ca marche, il faut bien ecrire le css : div#ID_DE LOBJET{

donc si tu ne veux pas changer le table pour du positionement par <div> il faut se renseigner sur le # du css et ce que l'on peut mettre autre que div devant.

j'ai fait un excercice ou j'ecrivais comme toi le css, le height voulait pas marcher puis quand j'ai ecrit div# ca a directement marché, sur IE et FF

**trotters213** · 01/03/2007, 11h46

Envoyé par hakurou

c'est le même principe si ce n'est que c'etait avec des <div> et nom du <table>, pour que ca marche, il faut bien ecrire le css : div#ID_DE LOBJET{

donc si tu ne veux pas changer le table pour du positionement par <div> il faut se renseigner sur le # du css et ce que l'on peut mettre autre que div devant.

j'ai fait un excercice ou j'ecrivais comme toi le css, le height voulait pas marcher puis quand j'ai ecrit div# ca a directement marché, sur IE et FF

Le # permet d'indiquer dans ton CSS que tu veux donner un style à un id (le div que tu mets devant est facultatif, il correspond en fait à la balise à laquelle tu as donné un id).
Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
...
<table>
  <tr>
    <td>
      <div id="haut">bla bla bla</div>
    </td>
  </tr>
  <tr id="bas">
    <td>bla bla bla hop</td>
  </tr>
</table>
...

Code CSS :

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

1
2
3
4
5
6
7
#haut /*ou div#haut*/{
background-color:#f00;
}
 
#bas /*ou tr#bas*/ {
background-color:#0f0;
}

Si tu comptes utiliser le style plusieurs fois, tu dois utiliser une class à la place de ton div et un "." au d'un "#" dans ton CSS.

[HTML] Problème avec DIV, impossible de mettre la hauteur à 100% !!

HTML

Discussions similaires

Partager

Partager