hauteur d'un div selon son parent [Résolu]

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.

17/06/2011, 13h19	#2
Hyuunkel Candidat au titre de Membre du Club Technicien Supérieur en Support Informatique Inscription : juin 2011 Messages : 27 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Technicien Supérieur en Support Informatique Informations forums : Inscription : juin 2011 Messages : 27 Points : 14 Points : 14	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
	00

17/06/2011, 14h42	#4
goldor Membre du Club Inscription : juillet 2007 Messages : 119 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 119 Points : 45 Points : 45	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 __________________ http://www.dreamtickinteractive.com
	00

17/06/2011, 23h42	#5
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Regarde autour du terme de colonnes factices. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email