28172 sujets

CSS et mise en forme, CSS3

Height:100% moins le footer

Je ne suis sans doute pas très bien réveillé après ce looong week-end.

Et même en cherchant sur Alsa ou les articles de Pompage, ou ce forum, j'ai du mal à trouver mes solutions :

je cherche à faire une mise en page en height à 100%
Jusque-là tout va bien, en passant les références html et body à 100%...

Mais il y a un footer
le footer est toujours en bas de page, de hauteur fixe.
et donc ma div a une hauteur maximale de 100%, moins la hauteur du footer.
Si le contenu est trop petit, ma div ne vient pas toucher le footer.
Si le contenu est trop grand, un scroll apparait sur la div...

Et bien ça n'a pas l'air si compliqué, mais je ne m'en sors pas..
Bonjour à toi aussi et bienvenue ici,

Tiens, au fait, sais-tu que les mots "bonjour", "s'il vous plaît", "au-revoir", "merci", etc. sont tous des mots du dictionnaire et que nous les utilisons ici sans honte ?

Concernant ton interrogation, as-tu pris le temps de aire un petit tour sur cet article : comment débuter et trouver l'information ?, ainsi que dans les tutoriels et dans la FAQ ?

Cela devraient déjà bien t'informer sur les standards du web et la manière de faire un site conforme et la galerie de modèles de mise en page en CSS t'aider à faire ce que tu cherche... Smiley cligne
Modifié par Mikachu (15 Jul 2008 - 17:00)
Hello Mikachu !

et oui, j'ai bien fait une recherche...

en fait je suis donc bien passé par la galerie de modèles, mais justement, il faudrait peut-être épingler quelques autres modèles Smiley cligne
Les exemples en hauteur en 100% ne sont pas légion... et ceux qui le sont proposent des contenus de hauteur fixe...

Raphael propose un article dans le blog d'Alsa qui renvoie vers un article de Pompage, mais je ne trouve pas vraiment de solution au problème...
Comme pour cet article du forum, le scroll se met en place au niveau du conteneur principal, alors que j'aimerais ne l'appliquer qu'au niveau du contenu texte...
Bref, je cherche une mise en page similaire au modèle #12 de la galerie de modèles, mais en footer fixe et contenu fluide...

Peut-être ne suis-je pas très compréhensible...

Mais merci du coup de pouce Smiley cligne
Salut,

Un truc de ce style? Si ça t'aide 
<body>
<div id="conteneur">
   <div id="contenu">
 <p>bla bla ....</p> 
   </div>

   <div id="pied">
   </div>
</div>
</body>


*{padding: 0; margin: 0;}

html, body{
height: 100%;

}

#conteneur{
height: 100%;
background: lime;
position: relative;
}

#contenu{
height: 100%;
margin-bottom: 50px;
background: red;
overflow: auto;
}

#pied{
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
background: silver;
z-index: 100;
}
Merci Ghost,

J'ai essayé cette solution ;

Tant que le contenu est plus petit que la hauteur du texte, tout va bien, mais si le contenu s'agrandit, il passe sous le footer ;

En effet, le footer étant en absolu, il sort du flux, et passe par-dessus la div de contenu.

Et le margin-bottom du contenu n'est pas pris en compte...
Bon, j'ai finalement trouvé une solution en JavaScript, en m'inspirant de l'article sur Pompage...

Je récupère la hauteur de l'écran, et je mets à jour la hauteur du contenu en soustrayant la hauteur du footer.

Mais c'est pas franchement nickel.. Smiley confus
Re,

Désolé, à l'heure de l'apéro faut pas trop que je réfléchisse Smiley biggol 
<body>
<div id="conteneur">
   <div id="contenu">
   <p>Bla bla ... </p> 
   <div id="spacer">
   </div>
   </div>
   <div id="pied">
   </div>
</div>
</body>


*{padding: 0; margin: 0;}

html, body{
height: 100%;
}

#conteneur{
height: 100%;
background: lime;
position: relative;
}

#contenu{
height: 100%;
background: red;
overflow: auto;
}

#spacer{
height: 50px;
}

#pied{
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
background: silver;
}


Pas garanti ie6, je ne l'ai pas sous la main mais ie7, FF3 et opera semblent ok
Bonjour,

Il n'y a absolument pas le moins du monde besoin de JS (en tout cas si j'ai bien compris ce que tu veux faire).

Tu devrais explorer la propriété "overflow" de ton élément qui contient le texte. Un "overflow: auto" avec une "height: 100%" et un "margin-bottom" égal à la hauteur du footer devraient suffir.
Merci pour vos réponses,

mais non, ça ne suffit pas..
Essayez ceci :

*{padding: 0; margin: 0;}

html, body{
height: 100%;
}

#conteneur{
height: 100%;
background: lime;
}

#contenu{
height: 100%;
background: red;
overflow: auto;
margin-bottom:100px;
}

#pied{

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: silver;
}



<body>

<div id="conteneur">

   <div id="contenu">

   <p>Un long contenu texte pour se confronter au footer ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 
   <p>Bla bla ... </p> 

   </div>

   <div id="pied">le footer qui se superpose au contenu, et qui le masque donc...</div>

</div>
Re,

Arf ce n'est pourtant pas l'heure de l'apéro Smiley cligne

Il faut inclure un spacer de la hauteur de ton footer avant la fin de ton contenu

<div id="spacer">
</div>


#spacer{
height: 100px;
}


Pour "sortir" la fin du contenu de dessous le footer

Voir le code du dernier post, enfin chez moi ça marche
Bonjour,

J'ai testé cette mise en forme, mais il y a un léger "problème", si un scroll apparrait, la flèche du bas se retrouve quand même en dessous du footer (malgré le "spacer").
Sujet clos
Aller à