28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Besoin d'aide pour un CSS

Bonjour à tous,

Je m'arrache les cheveux sur un CSS pour un site perso et je ne trouve pas de solution élégante.

En m'aidant de ce : sujet, j'ai réussi a obtenir cela :

http://tlc77.free.fr/divers/pb_css.png

Voici un résumé de la situation :

- Div entete (gris) doit faire exactement 100px de hauteur (je veux pas de pourcentage) et prendre toute la largeur --> OK
- Div menu (vert) doit faire exactement 150px de largeur (idem je veux pas de %) --> OK
- Le Div menu (vert) doit faire toute la hauteur restante --> MARCHE PAS
- Le Div contenu doit faire toute la largeur restante --> OK
- Le Div contenu doit faire toute la hauteur restante --> MARCHE PAS

En fait j'aimerai étirer verticalement les div "menu" et "contenu" pour qu'ils aillent jusqu'en bas de la page (qu'ils rejoignent le div corps (rouge)).

Voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>test min-height</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <meta http-equiv="content-style-type" content="text/css" />

  <style type="text/css" media="all">

* {padding: 0; margin: 0;}

html, body { 

   height: 100%;
   width: 100%;   

}



div#corps { 

   background: red; 
   height: auto !important; 
   height: 100%; 
   min-height: 100%; 
   
   width: auto !important; 
   width: 100%; 
   min-width: 100%;
}

div#entete 
{ 
   background: #999999; 
   height: 100px; 
}

div#menu
{
   float: left;
   background: green; 
   width: 150px; 
}

div#contenu
{
 background: yellow; 
}

  </style>

 </head>

 <body>

  <div id="corps">

   <div id="entete"><h1>entete</h1></div>
   <div id="menu">menu</div>
   <div id="contenu"><p>contenu</p></div>

  </div>

 </body>

</html>


J'ai beau chercher je ne trouve la solution... Pourriez vous me filer un coup de main ? Smiley biggrin

Merci !
Modifié par tlc77 (25 Mar 2010 - 15:29)
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Il faut que tu modifies ton CSS :


div#corps { 
   background: red; 
   height: 100%; 
   width: 100%; 
}
div#menu
{
   float: left;
   background: green; 
   width: 150px; 
   height: 100%;
}

div#contenu
{
 background: yellow; 
 height: 100%;
}


Marche très bien chez moi. Pour que le reste de la hauteur soit occupé par tes DIV, il faut leur appliquer la propriété height:100%. Cette propriété ne fonctionne que si son parent la possède aussi.

Cordialement.
Modifié par aztuk (25 Mar 2010 - 13:39)
Merci à vous pour vos réponses, finalement j'ai opté pour un gabarit (je ne connaissais pas) très simple et super complet !
Merci à vous. ! Smiley smile
Sujet clos
Aller à