Discussion :

[Delphy113]

Bonjour

Je souhaite faire une page qui prend toute l'espace de la fenêtre du navigateur sans que les scrollbars s'affichent.
C'est assez simple, il suffit de faire comme cela :

Code :

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

1
2
3
4
5
6
html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	}

La ou ca se corse c'est que je voudrait séparer l'espace en hauteur entre une div de hauteur variable (dépendant du contenu) et une div dont la hauteur prend tout ce qui reste

Code :

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

1
2
3
4
5
6
<div>
	Texte
</div>
<div style="background-color:lightgrey;">
	autre dont la hauteur fait tout le reste de l'espace
</div>

J'ai tente avec une table :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table style="height:100%">
<tr style="height:1%"><td>
	Texte<br />
	Texte<br />
	Texte<br />
</td></tr>
<tr style="height:99%;">
<td style="background-color:lightblue; height:100%;">
	main content
</td></tr>
</table>

Ça marche très bien sur Firefox et Chrome, le texte est bien affiche et la ligne du bas prend l'espace qui reste, mais pas sous IE6 ni IE7. IE veut absolument mettre 99% a la ligne du bas tout en mettant l'espace nécessaire (>1%) a la ligne du haut. Ce qui fait qu'il affiche les scrollbars car le tout dépasse de la page.

Qu'en pensez vous ? J'ai passe des heures sur google a chercher des solution, j'ai rien trouve de probant. Des idées pour faire ce que je cherche a faire ?
Merci

[Vil'Coyote]

comme ça à vues de nez du javascript te récupérant la taille de l'écran et donnant la taille de tes div.

[c_s_s]

Bonjour, j'ai quelque chose de très simple à proposer et qui correspond à la description que tu donnes, mais comme cette description n'est pas détaillée, je ne sais pas si ce code conviendra.

Code css :

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
html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
.principal {
	height:100%;
	background:#f1f1f1;	
}
.bas {	
	padding:20px;
}
.haut {
	background:#B19D84;	
	padding:20px;
}

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div class="principal">
	<div class="haut">		
		Contenu du bloc Haut - Hauteur variable en fonction du contenu.
	</div>
	<div class="bas">
		Contenu du bloc bas - Hauteur restante.	
	</div>	
</div>

A noter que le bloc .bas n'est pas indispensable. Je l'ai ajouté pour une mise en page plus agréable à l'oeil.
Idem pour les couleurs de fond qui peuvent être modifiées/supprimées.

Cet exemple implique que [ contenu haut + contenu bas ] ne soit pas plus haut que la fenêtre du navigateur, sinon il y aura des scrollbars.

[Delphy113]

Bonjour,

Merci de vos propositions
c_s_s, j'ai teste mais la div du bas ne prend que l'espace dont elle a besoin également (il suffit de lui mettre une couleur de background pour le voir). J'ai effectivement besoin d'une div en bas mais qui prend tout ce qu'elle peut. Le but est d'y insérer une map grâce a l'api google map, et que la map soit la plus grande possible, un peu comme sur http://maps.google.fr/ par exemple.

Vil'Coyote, c'est la solution sur laquelle je vais me rabattre si il n'y a pas de solution html/css mais pour ça je voudrais être certain qu'il y a aucune solution html/css.

Petite précision, le site est en XHTML 1.0, un doctype différent peut m'apporter des solutions ?

Merci