28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un problème depuis qq temps qui n'a pas l'air si compliqué mais qui m'a déjà coûté qq cheveux, c'est pourquoi je fait appel à vous, je n'y vois plus rien.

Mon but est d'avoir une page avec un menu en haut sur toute la largeur, un menu latéral à gauche et un espace de contenu, comme ceci:

Menu Haut
----------------------------------------------
navigation | contenu


Mais je voudrais que le menu "navigation" ait une hauteur de 100%.

Voici mon code:


<body min-height:100%">
  <div id="global" style="overflow: hidden; width:100%; height:100%">
<!-- Start Menu Haut -->
<div style="width:100%;background-color:#3399CC;height: 72px;border-bottom: 7px solid #eaf4f9;"> 
</div> 
<!-- End Menu Haut -->
      
<!-- Start Menu Latéral -->
<div id="navigation" style="width:300px; height:100%; border: 1px solid #000; float: left;">
</div>
<!-- End Menu Latéral --> 
      
<!-- Start Content -->
<div id="content" style="height:100%; width:100%; border: 1px solid #000; ">
</div>
<!-- End Content -->    
  </div>      


Où me suis-je trompé svp?

Merci
Bonjour. La propriété height ne peut pas avoir de valeur 100% (sauf pour la balise html). En effet, 100% de 0 fait 0.

Il est vrai que la propriété width, en adoptant une logique à l'opposé, porte à confusion..

Il est possible d'utiliser les vh units, mais attention à la compatibilité.
Modifié par Olivier C (19 Nov 2015 - 13:21)
Bonjour,
J'aime bien toujours me poser la question : hauteur 100% ok mais 100% de quoi ? du body ? du conteneur ? de la fenêtre du navigateur ?
Réponse : du body.
Dans ce cas, je mets :
<body style="height:100%;">
(et non <body min-height:100%"> qui est mal écrit et même bien écrit ne fonctionne pas)
mais 100% de quoi ? bonne question, car là, le truc ne marche pas encore.
donc il faut aussi :
<html lang="fr" style="height:100%;">

et tant qu'à faire, enlevons les marges internes et externes (margin & padding) du body pour ne pas avoir de barre de défilement inappropriées :

<body style="height:100%;padding:0;margin:0">

Le résultat semble bon mais le overflow hidden masque la bordure inférieure, et même davantage, car 100% (navigation & content + 72px de menu haut => on dépasse la hauteur.
Merci !

Voila qui résout mon problème de hauteur !

Concernant la largeur du cadre "contenu", je n'arrive pas à le faire remplir le reste de l'espace disponible.

En effet si je mets "auto" il ne va pas jusqu'au bout, si je mets 100% il prend tout l'espace de la fenêtre, sans prendre en compte le menu à gauche, et vient logiquement se placer en dessous.

Comment faire?
ni "auto", ni "100%", c'est une div, donc un élément de type block, et il occupe tout seul tout l'espace disponible, et du coup on voit la bordure de droite
(100% s'ajouterait aux 300px de la div navigation, même conséquence que pour les hauteurs donc)