Question sur la hauteur d'une DIV

**srahl17449** · 10/08/2019, 09h13

Bonjour à tous,

Dans le cadre d'une petite remise en forme sur HTML et CSS je suis confronté à la problématique suivante :

J'ai trois <div> dans le <body> de ma page :
- conteneur
- contenu gauche
- contenu droite

Le contenu gauche à vocation à servir de menu tandis que le contenu droite d'affichage.

Le contenu droite est en height : auto; et déborde de l'écran, je souhaiterai donc que mon contenu gauche prenne automatiquement la même hauteur cependant je ne trouve pas de solution.

Quand j'indique height : 100%; la div contenu gauche s'adapte à la hauteur de l'écran et non pas à la hauteur de la page entière.

Je vous remercie par avance pour vos contributions !

Vous trouverez ci-dessous les scripts ainsi qu'une image correspondant à l'affiche obtenu :

Code HTML :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html lang="fr">
<head>
    <title>Accueil</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body> 
	<header id="bandeau_haut">
		<h1> Mon site </h1>
	</header>
 
 
 
	<div id="conteneur_principal">
		<div id="conteneur_gauche">
			<p> A </p>
		</div>
 
		<div id="conteneur_droite">
			<p> B </p>		
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>		
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
			<p> B </p>
		</div>	
	</div>
</body>
</html>

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
html,body {
	width : 100%;
	height : 100%;
	padding : 0;
	margin : 0;
}
 
#bandeau_haut {
	background-color : grey; 
	height : auto; 
	width : 100%;
}
 
#conteneur_principal {
	width : 100%; 
	height : 100%;
	}
 
#conteneur_gauche {
	float : left; 
	width :40%; 
	height : 100%;
	background-color : green;
}
 
#conteneur_droite {
	float : left; 
	width :60%;
	height : auto;
	background-color : orange;
}

Nom : Capture.PNG
Affichages : 77
Taille : 15,4 Ko

Invité · 10/08/2019, 09h39

Bonjour,

1- une solution très simple et compatible :

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
#conteneur_principal {
  display : table;
  width : 100%; 
}
#conteneur_gauche {
  display : table-cell;
  width : 40%; 
  background-color : green;
  padding:20px;
}
#conteneur_droite {
  display : table-cell;
  width : 60%;
  background-color : orange;
  padding:20px;
}

N.B. Tant que faire se peut, oublie les float : left/right.

2- Il existe aussi les flexbox

Quelques liens ici

**srahl17449** · 10/08/2019, 09h42

Bonjour,

Excellent cela fonctionne !

Merci beaucoup, bonne journée.

Question sur la hauteur d'une DIV [CSS 3]

Dimensionnement en CSS

Discussions similaires

Partager

Partager