Placer div de pied de page

**vocal94130** · 03/02/2010, 16h26

Bonjour à tous,

J'ai un petit soucis, j'aimerai placer mon div de pied de page de façons à ce que si l'écran est trop grand ( en hauteur ) le pied de page se place tout en bas, sinon qu'il se place à sa position absolue définie par défaut.

Peut-être jouer avec un min-heigh ( le min-heigh étant la position de départ )?

Merci de votre aide

**Macmillenium** · 03/02/2010, 18h23

Bonsoir,

FAQ

http://css.developpez.com/faq/?page=...ooter_bas_page

**vocal94130** · 08/02/2010, 10h43

Honte à moi

Merci beaucoup

**vocal94130** · 28/02/2010, 21h15

En fait non, ça ne marche pas car le footer est placé en bas de page initiale ! Il ne se place pas en bas du scroll :s ! Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>   
 
    <div class="en_tete"> <!--position absolue pour tous les div -->
 
           <div class="menu">
           </div>
 
           <div class="fondSousMenu">   
           </div>
 
    </div>
 
    <div class="backgroundCorps">
        <div class="leCorps">
        </div>
    </div>
 
</body>

Tous mes div sont en position absolue.

Voici un screenShot :

Merci

**MicaelFelix** · 03/03/2010, 04h57

Envoyé par vocal94130

j'aimerai placer mon div de pied de page de façons à ce que si l'écran est trop grand ( en hauteur ) le pied de page se place tout en bas, sinon qu'il se place à sa position absolue définie par défaut.

Peut-être jouer avec un min-heigh ( le min-heigh étant la position de départ )?

Un min-height n'est là que pour spécifier la hauteur d'un élément, je ne sais pas si c'est vraiment approprié dans ton cas.
En plus, tu dis avoir deux cas : un trop grand (pour le cas où tu le veux tout en bas) et un en position par défaut. CSS n'a pas de logique pour ça à mon avis, donc si tu veux faire des placement en fonction de certaines conditions (comme la taille de l'écran), il faudra passer par le javascript.

Qu'est-ce que tu entends par "Il ne se place pas en bas du scroll"? Sur ton screenshot il faudrait identifier où c'est actuellement positionné, et où tu voudrais que ça soit positionner. Pour moi c'est pas très clair mais bon c'est juste moi

**vocal94130** · 03/03/2010, 09h35

Ici il y à du scroll donc le pied de page est plus bas ( il ne doit donc pas être visible sur le sreenshot )

Ici pas de scroll donc le pied de page devrait être visible sur ce screenshot

Sinon j'ai essayé plusieurs technique pour récupérer la taille de la page en javascript , pour le width j'ai bien la largeur mais pour heigh j'ai toujours 0 :s

Est ce que c'est plus clair

?

Merci de ton aide

**MicaelFelix** · 03/03/2010, 20h04

As-tu essayé une solution comme (je parle du footer):

Code :

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

1
2
3
position:fixed;
bottom:0;
height:123px;/*la taille*/

Au pire ensuite tu ajoutes toujours un padding-bottom de la taille précisée dans le code ci-dessus (ou un div vide de la même taille) au niveau de ton conteneur de contenu de page (la zone blanche) comme ça tu auras toujours une place réservée à ton footer sur ta page.

Avec cette solution, tu ne verras JAMAIS le footer si jamais y'a un scroll (assez grand on s'entend), et tu verras toujours le footer en bas de page si jamais il n'y a pas de scroll.
Je pense que ça règle ton problème.

Sinon il va falloir que tu joues avec les propriétés de la hauteur de la fenêtre, si tu n'as pas trouvé sur internet tu peux intégrer une librairie javascript comme jQuery qui intègre ce genre d'information et qui te sera utile un jour ou l'autre pour faire des actions/animations javascripts.

Qu'en penses-tu?

**vocal94130** · 08/03/2010, 15h07

Euhh ... Je ne comprends pas trop ce que tu veux dire :s !

Comment puis-je ne pas voir le footer s'il est en position fixe?

**vocal94130** · 10/03/2010, 10h23

Finalement j'ai changé mon architecture et j'ai opté pour prendre quelque chose qui s'adapte à la FAQ de Macmillenium !

Merci de votre aide

Placer div de pied de page

Positionnement en CSS

Discussions similaires

Partager

Partager