Div sur la hauteur de la page

**the_programmeur** · 14/04/2016, 18h02

Bonsoir à tous,

Je rencontre un problème avec une div, en effet je souhaiterai faire un bandeau de couleur sur la droite avec dedans mon menu, seulement le background-color appliqué sur ma div ne descend pas sur toute la page ... Je ne sais pas comment m'y prendre ..

Merci d'avance,

**johnrock** · 14/04/2016, 18h48

Bonjour the_programmeur!
Je pense que ce serait mieux que poste un extrait de ton code pour la partie concernée ou un arpercu du résultat déjà en ligne, car c'est la meilleure façon pour nous de t'aider.

**the_programmeur** · 14/04/2016, 18h51

Bien sûr voici le résultat

Nom : portofiolo.png
Affichages : 252
Taille : 105,0 Ko

**johnrock** · 14/04/2016, 19h19

Ce n'est toujours pas si simple à comprendre, mais je bais essayer.
D'abord, fait flotter ton bandeau et ajoute-y quelques propriétés CSS de cette manière:
essai de html

Code :

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

1
2
3
4
5
6
7
8
 
<div class="bandeau">
<ul id="menu">
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
</ul>
</div>

essai de CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.bandeau
{
float: left;
height: /*Pense à mettre ici une grande valeur */;
margin: /* 20px auto par exempl */;
}
#menu
{
... /*tous tes styles de menu */
}

**johnrock** · 14/04/2016, 19h21

Pense à mettre ton code CSS pour une meilleur aide

**Azerx** · 15/04/2016, 10h25

Bonjour,
il suffit d'appliquer à ton html et ton body une hauteur de 100% (pour qu'ils prennent bien toute la hauteur de la page):

Code :

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

1
2
3
4
5
6
html,body {
	margin: 0px; //pas de marge sur les cotés
	padding: 0px; //pas de marge à l intérieur
	outline: 0px; //pas de bordures
	height: 100%; //prend 100% de la hauteur 
}

ensuite, tu dis à ta div qui se trouve sur ton coté gauche qu'elle doit remplir x% de ce body (tu remplace x par la valeur que tu veux en fonction de ton header/footer.

Code :

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

1
2
3
4
5
6
7
8
.sideLeft {
	float: left;  // est collé à gauche
	vertical-align: top; //est collé en haut
	width: 25%; //prend 25% de largeur
	height: 84%; //prend 84% de hauteur
	display: inline-block; //ne renvoie pas le reste de la page à la ligne
	background: #d8e7ef; //couleur du background
}

dans mon exemple, le reste de ma page fait 75% de largeur (donc la div prend 25%), et mon header/footer prend 16% de hauteur (donc la div prend 84%).

Si tu veux plus de détail n'hésite pas

**the_programmeur** · 15/04/2016, 11h04

Merci de ta réponse alors voilà ce que j'ai fais:
Nom : aperçu.png
Affichages : 247
Taille : 156,1 Ko

Nom : aperçu2.png
Affichages : 237
Taille : 160,8 Ko

[ATTACH=CONFIG]207011

Mais le résultat ne me convient pas tout à fait encore... Il ne serait pas possible que le bandeau s'adaptent en hauteur en fonction du contenu de la page ?

Merci,

**Azerx** · 15/04/2016, 11h16

Je pense qu' il faut que tu applique un overflow sur ta balise body pour que cette dernière s'agrandisse quand le contenu prend trop de place(overflow: auto devrait convenir si je ne me trompe pas)

**the_programmeur** · 15/04/2016, 11h51

Merci pour le overflow: auto c'est toujours ça de pris mais ça ne résoud pas complètement mon problème :/ Je voudrai que mon bandeau de couleur ici aqua prennent toute la hauteur disponible. Je ne sais pas si je m'exprime clairement :/ Si vous avez des questions n'hésitez pas

Merci à vous,