[CSS] Agrandir à la hauteur de l'écran

**djflex68** · 23/03/2006, 17h35

Bonjour,

Je cherche comment agrandir un contenu à la hauteur de l'écran, sinon plus. En effet, par défaut un div prend la place dont il a besoin, sans plus. Mais je souhaiterais qu'il s'agrandisse jusqu'en bas de ma page, dans tous les cas.
Le problème c'est que je ne peux pas mettre 100%, mon div ne commence qu'au milieu de la page environ, et le fait de mettre 100% provoque un débordement vertical important.
Pour résumer, comment faire pour qu'un div placé n'importe ou sur une page s'étire jusqu'en bas de cette page sans la dépasser (sauf si le contenu est plus grand que la page bien sûr) ?

Merci

**Poutchou** · 23/03/2006, 17h58

tu peux pas lui donner une taille fixe ?

**djflex68** · 23/03/2006, 20h41

ben non puisque sinon il se limiterait strictement à cette taille... Il faut qu'il descende de toutes façon jusqu'en bas de la page, mais qu'en plus, si le contenu déborde de l'écran, que le div s'agrandisse avec ..

**francis m** · 23/03/2006, 23h26

je ne sais pas si c'est la meilleure solution, mais ce qui suit doit fonctionner :

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
<html>
<head>
	<style type="text/css">
#content 
	{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #F0D080;
	}
#partiel
	{
	position: absolute;
	top: 50%;
	height: 50%;
	width: 100%;
	background-color: #AAAAAA;
	}
	</style>
</head>
<body>
 
<div id="content">
	<p>A</p>
	<div id="partiel">
		<p>2<br>2<br>2<br>2<br>2<br>2</p>
	</div>
</div>
</body>
</html>

Je te laisse le plaisir de gérer les marges, padding, etc

**djflex68** · 24/03/2006, 17h34

le seul problème, c'est quand dans ton code, tu mets top:50% et height:50%, or moi je ne connais pas la taille ce ce qui se trouve au dessus. ça prend à peu près la moitié de l'écran mais ça reste dynamique (pas de 50% donc)...

**francis m** · 24/03/2006, 19h00

comme suit alors :
tu mets ton contenu global à 100% et tu mets la partie haute dans un div spécifique, qui fera environ 50% en fonction de son texte

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
<html>
<head>
	<style type="text/css">
#content 
	{
	height: 100%;
	width: 100%;
	background-color: #F0D080;
	}
#haut
	{
	width: 100%;
	background-color: #AAAAAA;
	}
	</style>
</head>
<body>
<div id="content">
	<div id="haut">
		<h1>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A</h1>		
	</div>
	<div id="a_definir_comme_souhaite_ou_a_supprimer">
		<h1>2<br>2<br>2<br>2<br>2<br>2</h1>		
	</div>
</div>
</body>
</html>

**djflex68** · 24/03/2006, 21h00

oui ça marche maintenant !
merci bcp !

**djflex68** · 25/03/2006, 19h26

euh je viens de me rendre compte de qq chose de super bizarre :
ton code marche super bien sour IE et sous Firefox.
Par contre dès qu'on rajoute l'entête XHTML, il marche plus sous Firefox !
il y a une explication à cette bizarrerie ?

**francis m** · 26/03/2006, 00h12

la désolé aucune idée pourquoi cela ne va pas, je ne connais pas assez xhtml

**Akei** · 26/03/2006, 08h40

Bonjour,
Si j'ai bien compris tu veux faire un min-height.
Si oui je te propose de faire un hack (pas la meilleure solution)
Donc :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
/* Par defaut IE agrandit ton bloc si le contenu dépasse */
#nomDeTonSelecteur {
    height: ta valeur;
}
 
/* Résoud le bug des news navigateurs */
html>body #nomDeTonSelecteur {
    min-height: ta valeur;
    height: auto;
}

Voila j'espère que ca resoudra ton probleme.
++

[CSS] Agrandir à la hauteur de l'écran

Dimensionnement en CSS

Discussions similaires

Partager

Partager