Hauteurs des div pour obtenir 100% de la page

**lionheart33806** · 14/12/2006, 11h26

Bonjour,

Ma question est assez simple, peut-on coupler la hauteur fixe d'un div (en px) avec la hauteur variable d'un div (en %) pour que les deux div positionnés l'un en dessous de l'autre occupent toujours 100% de la page ?

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.div1{
position:relative;
height:50;
width:100%;
border:1px solid red;
}
.div2{
position:relative;
height:100%;
width:100%;
border:1px solid blue;
}

Code HTML :

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

1
2
<div class="div1">bla bla bla</div>
<div class="div2">blo blo blo</div>

Voilà, même avec un troisième div servant de conteneur aux deux autres, le div2 dépasse toujours de ma page de 50px.

Merci pour vos réponses.

**MasterOfChakhaL** · 14/12/2006, 12h02

Salut,

est-ce que ceci répond à ta question?

Code html :

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

1
2
3
4
5
6
7
 
  <body>
	<div id="div2">
		<div id="div1">bla bla bla</div>
		blo blo blo
	</div>
  </body>

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
18
19
 
    	* {
		margin: 0;
		padding: 0;
	}
	body {
		width: 100%;
		height: 100%;
	}
 
    	#div1 {
		height: 50px;
		background-color: orange;
	}
 
	#div2 {
		height: 100%;
		background-color: yellow;
	}

Note bien que j'ai modifié l'html...

**lionheart33806** · 14/12/2006, 12h25

Mon souci est en fait de pouvoir centrer verticalement le deuxième texte "blo blo blo", et c'est là que ça se corse.
Je n'aurais aucun mal à le faire avec des tableaux, mais j'ai la contrainte d'utiliser des divs et je me demandais si c'était réalisable sans javascript à l'appui.

Hauteurs des div pour obtenir 100% de la page

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager