28111 sujets

CSS et mise en forme, CSS3

Comment faire un <DIV> qui occupe toute la hauteur rest

Bonjour,

Je connais bien l'HTML (je me mets au XHTML) et connais les CSS dans le but de changer l'apparence (police, taille...) des éléments.

Je suis en train de me mettre à ce que certains appellent le Full-CSS ou CSS-p, c'est à dire bannir les frames et les tableaux pour la mise en page, en les remplacant par une CSS.


Maintenant que vous connaissez à peu près mon niveau, je vous expose mon problème :


Je souhaite réaliser une page contenant 2 parties :

-----------
| | -> entete
-----------
| |
| | -> corps
| |
| |
-----------

L'entete doit occuper toute la largeur de la page et faire 150 px de haut.
Le corps doit occuper toute la largeur de la page et tout l'espace restant en hauteur.

Mais cette construction doit s'adapter au résolution, c'est à dire que je ne connais pas la hauteur totale en pixel...

Avec des tableaux j'aurais fais :
<table width="100%" height="100%">
<tr width="100%" height"150">
<td>...entete...</td>
</tr>
<tr width="100%" height"*">
<td>...corps...</td>
</tr>
</table>

Et ce que je recherche en CSS c'est le moyen de remplacer l'étoile ("*") qui permet de dire : "le reste de la place"...

J'ai essayé de nombreuse solution, mais aucune ne fonctionne...

Merci de votre aide.

@+

Steph'

PS : Cette question a déjà du être poser mais ayant un accès Internet très limite (56k accès libre) en ce moment, je n'ai pas eu le temps de la trouver... en plus j'ai pas mis la main sur l'option "rechercher" :> ... désolé.
Modifié le 25 Dec 2004 - 09:28
oui mais y'a un ptit probleme au cas 4 que je n'arrive pas a resoudre, c'est que moi j'ai certain bloc en position absolue ce qui fait qu'il se deplace en meme temps qye le scroll


EDIT : NON j'ai rien dit, oubliez ce que j'ai écris
Modifié le 23 Dec 2004 - 15:28
Merci Dominique pour ta réponse.

Mais, elle ne répond pas vraiment à mon problème... j'avais pas du être assez clair. Enfin, j'ai quand même rajouter HTML lors que je définis le body (cf la page que tu donnes.), mais ca change rien.

Donc voici un schéma qui explique mon problème :

upload/628-explications.PNG

En fait j'y arrive en relatif : en mettant l'attribut height à 20% dans entete et à 80% dans corps.
Mais avec des tailles fixe (hauteur de l'entete = 150 pixels) là je ne sais pas quoi mettre comme hauteur pour le corps...

Merci de votre aide.

Steph'
Salut steph07 et bienvenue sur le Forum Alsacréations ! Smiley lol

Tu peux essayer ceci :
Le CSS :

* {padding: 0; margin: 0;}
html, body { 
   height: 100%; 
}
div#entete { 
   background: #999999; 
   height: 100px; 
}
div#corps { 
   background: #efefef; 
   height: auto !important; 
   height: 100%; 
   min-height: 100%; 
}

Le HTML :

 <body>
  <div id="corps">
   <div id="entete"><h1>titre</h1></div>
   <p>blabla</p>
  </div>
 </body>
alien7 a écrit :

Salut stephan,
Je viens de tester ton code et ca ne marche pas pour moi.

bah, pour toi je ne sais pas, mais ça correspond exactement à ce que steph07 demande ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=1029&p=1#p10440

Voici une page test :

<!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%; 
}
div#entete { 
   background: #999999; 
   height: 100px; 
}
div#corps { 
   background: #efefef; 
   height: auto !important; 
   height: 100%; 
   min-height: 100%; 
}
  </style>
 </head>
 <body>
  <div id="corps">
   <div id="entete"><h1>titre</h1></div>
   <p>blabla</p>
  </div>
 </body>
</html>
Merci Stephan !

Ton code répond complétement à mon attente !
EDIT : euh... non. cf post suivant...

Par contre pourrez tu me l'expliquez (j'aime pas utilisé un code que je comprend pas à fond !)...

Voyons si j'ai compris :

a écrit :
* {padding: 0; margin: 0;}

-> Pour que touts les éléments est margin et padding à 0. facile Smiley biggrin

a écrit :
html, body { height: 100%; }

-> Pour que le conteneur père est bien une taille de 100% (étant donné qu'il faut définir la taille du père avant celle d'un fils...).. enfin c'est mal dit mais je le comprend toujours...

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

-> C'est le code pour l'entête... rien de particulier (la taille est donné en pixel comme souhaité)... juste une question : Pourquoi marqué div avant le # ?

a écrit :
div#corps {
background: #efefef;
height: auto !important;
height: 100%;
min-height: 100%;
}

-> C'est le code de la partie corps...
Et là j'ai plein de questions Smiley lol !
1- En mettant height: 100% (sans mettre le reste..) ma partie corps sortée de l'écran... en effet elle faisait 100% de la page donc elle dépasser de 100px (la taille de l'entete...) ... Pourquoi ca marche chez toi ? Est-ce à cause du height: auto ?
2- height: auto !important : le important signifit que cet attribut height passe avant les autres ? (C'est surement le point des CSS que je m'étrise le moins : la hiérarchie des attribut)

Enfin bon, ca marche, je vais donc pouvoir m'attaquer au contenu du corps... c'est pas gagné Smiley cligne

@+

Merci encore...

Steph'
Modifié le 25 Dec 2004 - 09:36
Oups, Ca marche MAIS c'est pas ce que je veux !

Et oui, j'avais pas fait attention...

En fait à terme, je veux mettre un menu qui occupe toute la partie gauche de la zone "corps" (avec float:left et height:100%) et une partie contenu qui occupe toute la partie de "corps" laissé libre par le menu... et tout ceci j'y arrive.

Mais ca ne marche pas avec la solution que propose Stephan, car l'entete est dans le corps... et non séparé comme sur mon schéma...

Or par la suite les élément que je place dans le corps ont une taille relative à celle du corps... donc celui ci ne DOIT PAS contenir l'entete...

Donc pour resumer, il me faut :

---> 1 bloc "entete" : qui occupe 150px (enfin une taille définit en pixel) de haut et toute la largeur de la page (comme celui de Stephan)

---> 1 bloc "corps" : qui occupe l'ESPACE RESTANT... afin de pouvoir y travailler dedans par la suite...

Je suis pas sur d'avoir étais bien clair Smiley confused

Voila

@+

Steph'
steph07 a écrit :

Pourquoi marqué div avant le # ?

Facultatif. Donne simplement l'information que le "id" s'applique à un <div>.

steph07 a écrit :

Oups, Ca marche MAIS c'est pas ce que je veux !

Rien ne t'empêche de construire à l'aide de ce modèle.

Sous l'entête (dans le corps) tu ajoutes ton menu et ton contenu.

#gauche { 
   float: left; 
   width: value; 
}

#droite { 
   margin-left: value; /* la largeur de #gauche */
}

Une autre méthode consiste à utiliser une image en background pour simuler les colonnes.
Lire : Faux Columns
Donc ta page pourrait ressembler à ceci :

<!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%; 
}
#entete { 
   background: #999999; 
   height: 100px; 
}
#corps { 
   background: #eeeeee; 
   height: auto !important; 
   height: 100%; 
   min-height: 100%; 
}
#gauche { 
   background: #cccccc; 
   float: left; 
   width: 200px; 
}
#droite { 
   margin-left: 200px;
}
  </style>
 </head>
 <body>
  <div id="corps">
   <div id="entete"><h1>titre</h1></div>
   <div id="gauche">
    <ul>
     <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>
    </ul>
   </div>
   <div id="droite"><p>blabla</p></div>
  </div>
 </body>
</html>

Joyeux Noel Smiley bignoel
Modifié le 27 Jan 2005 - 07:16
Salut,

Merci de tes conseil Stephan... mais je pense que tu t'égares... je dois être trop mauvais pour expliquer...

Reprenons :

upload/628-explications.PNG

Comme tu vois, j'ai besoin que le bloc corps sont disctinct du bloc entête... donc m'a question c'est comment faire un bloc disctinct du bloc entête, qui se place au dessous de cette entête et qui occupe TOUTE la hauteur disponible (même s'il n'a pas de contenu)...

Voila...

Car avec t'as solution : comment centrer verticalement les blocs qui seront dans la partie #gauche ?

Et comment faire un bloc dans la partie droite qui occupe 80% (en hauteur et largeur) de la partie #droite même s'il ne contient rien...

Merci encore...

@+

Steph'
steph07 a écrit :

Merci de tes conseil Stephan... mais je pense que tu t'égares...

Je ne m'égare pas du tout. Je pense plutôt que tu as une vision tabulaire du positionnement CSS.

dominique t'as donné une piste de solution ici :
http://www.alsacreations.com/blog/index.php?2004/05/13/3-height

Je t'ai fourni deux modèles complets mâchés et digérés :
http://forum.alsacreations.com/topic.php?fid=4&tid=1029&p=1#p10585
http://forum.alsacreations.com/topic.php?fid=4&tid=1029&p=1#p10596

Plus une solution alternative : Faux Columns

Et j'en rajoute une couche : min-height: fixed;

Qu'est-ce que tu attends de plus ?

Tu as ici tout ce dont tu as besoin pour réaliser ton positionnement.
Relis tout et si tu ne comprends pas, relis encore.

Smiley fache
Modifié le 26 Dec 2004 - 10:41
a écrit :
chourmo a écrit :
Juste une petite question.
Tu dis que ça ne marche pas. Avec navigateur et sur quel sytème ?

Les codes que vous m'avez fournit fonctionne tous ! Et j'ai jamais dit le contraire (ou sinon c'est une bourde !)

a écrit :
Stephan a écrit :
Je pense plutôt que tu as une vision tabulaire du positionnement CSS.

C'est vrai... on change pas si facilement de veille habitude ! Smiley lol


Je continue à penser que ces codes fonctionnes mais qu'ils résolvent pas mon problème... mais bon, je vois que deux solutions :
- J'explique SUPER mal... c'est grandement possible !
- J'ai loupé une étape...

Donc je m'en vais de ce pas relire tout vos conseils... en espérant y trouver ce qu'ai pas su y trouver les premières fois....

Bon, ben je vous redonne de mes nouvelles demain apres-midi... ca me laisse le temps de tout relire...

Merci encore...

@+

Steph'
Faire ne sorte que ca prenne toute la hauteur ans que l'entete ne remange de la place.....c'est bien cela que tu veux?

J'ai entendu dire un jour de la part de ma collègue qu'elle prend 2 divs l'un a côté de l'autre. Je m'explique:

-Un div conteneur à 100%
-L'html et body a 100%.
-tu met deux divs un a droite et l'autre a gaucheds le conteneur.
Tu place un partie de ton entete a droite et l'autre a gauche.(Faut couper son image)

Ainsi, normalement, l'entete ne reproduit pas 100px de plus par exemple ds le bas de la page.

Pas encore essayé mais je tenterai.
a écrit :
<html>

<style>
body, html{
margin:0;
padding:0;
height:100%;
}
#conteneur{
height:100%
}
#gauche{
left:0;
position: absolute;
width:150px;
height:100%;
background: cyan;
}
#droite{
margin-left:150px;
height:100%;
background:blue;
}
.entete1{
width:150px;
height:100px;
background: red;
}
.entete2{
height:100px;
background: red;
}
</style>

<body>
<div id="conteneur">

<div id="gauche">
<div class="entete1"></div>
</div>

<div id ="droite">
<div class="entete2"></div>
</div>

</div>
</body>
</html>



Je sais pas si ca peut aider mais bon voila une page avec 100% de haueur et largeur
Administrateur
Oryo a écrit :

Je sais pas si ca peut aider mais bon voila une page avec 100% de haueur et largeur

Attention, apparemment ce n'est pas utilisable :

- pas de doctype, donc le document va faire basculer IE<6 en mode quirck, et de plus laisse les navigateurs libres d'interpréter le document n'importe comment.

De plus, le problème important de ta technique, est que lorsque le contenu de la page dépasse la taille d'un écran (donc dépasse les 100% de départ), ce contenu va déborder du conteneur puisque les navigateurs standards (presque tous sauf IE) interprètent "height" correctement et lorsque le contenu dépasse ce "height", il déborde sans pousser ce "height".
IE intérprète "height" comme s'il s'agissait de min-height, et le contenu peut pousser le conteneur.

Bref cette technique marche dans des conditions très strictes :
- le contenu ne dépassera jamais l'espace de visualisation de l'écran (pas de défilement à la scrollbar possible)
- le site n'est vu que sous IE

Pour tous les autres cas, il faut du min-height et donc en général du javascript
Modifié par Raphael (11 Nov 2005 - 13:19)
Sujet clos
Aller à