hauteur d'un div selon son parent

**goldor** · 17/06/2011, 13h13

Bonjour,

J'ai un petit problème CSS, je me suis dit qu'en posant la question ici je trouvais solution et j'en aiderait plusieurs au lieu de tomber sur des solutions bidon qu'on retrouve abondamment sur Google.

Voici mon souci :

J'ai un div "leftColomn" qui doit s'agrandir à 100% de la hauteur du div parent "main" qui lui est étirer par le div du contenu texte "content" situé à sa droite.

Voici de quoi a l'air le html :

Code :

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

1
2
3
4
5
 
<div id="main>">
   <div id="leftColomn"></div>
   <div id="content"></div>
</div>

Le 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
 
*{
 margin:0;
 padding:0;
}
body, html{
	width:100%;
	height:100%;
}
#main{
	position:relative;
	display:inline-block;
	height:auto;
	min-height:100%;
	background:url("../images/bkg-header.png") 32px 100% no-repeat;
}
#leftColomn{
	padding-top:32px;
	width:292px;
	height:auto;
	min-height:100%;
	float:left;
	display:block;
	position:relative;
}
#content{
	float:left;
	width:851px;
	margin-left:-33px;
	height:auto;
	min-height:10px;
}

**Hyuunkel** · 17/06/2011, 13h19

Hello je suppose que tu as testé ton main en absolute ?
Sinon à ta place je ferai mes placements moi même et supprimerai ton

Code :

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

	display:inline-block;

Ça éviterai peut être des problèmes...

Cordialement

**brisso** · 17/06/2011, 14h09

Salut,
j'ai déjà été confronté au mm problème et si j'ai bien compris, tu es exactement dans la même situation que moi.

Je n'ai rien trouvé comme solution en CSS et du coup je suis passé en JS.

J'utilise ça :

Code :

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

1
2
3
4
5
6
7
8
 
function Ajuste_DIV(){
  var O_Srce = document.getElementById( 'content');
  var O_Dest = document.getElementById( 'leftColomn');
  O_Dest.style.height = parseInt( O_Srce.offsetHeight) +'px';
}
 
<body onLoad="Ajuste_DIV()">

Et je leur même height 100% et ça fonctionne parfaitement sur tous les navigateur que j'ai peu essayé.
En espérant t'avoir aidé

**goldor** · 17/06/2011, 14h42

Merci Brisso pour ta solution mais je crois que je vais me faire un background png transparent sur mon main étant donné qu'il ne semble pas avoir de solution css qui permetterais de résoudre le problème.

Ton js c'est très bien, sauf si on a du ajax dans la page, ce qui est le cas dans certaine pages.

Merci de votre aide

**12monkeys** · 17/06/2011, 23h42

Bonjour

Regarde autour du terme de colonnes factices.

hauteur d'un div selon son parent

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager