web-dev-qa-db-fra.com

comment faire flotter un div?

J'ai 4 divs. L'un est l'emballage extérieur et les 3 autres sont respectivement l'en-tête, le contenu et le pied de page. Tous sont de même largeur (fixe). Mais la hauteur de l'enveloppe extérieure et la div du contenu sont variables.

quelle que soit la taille de ceux-ci, je veux que le div de pied de page colle au bas de l'emballage extérieur. J'ai essayé d'utiliser le CSS suivant

position: relative;
bottom: 0px;

Mais ça n'a pas marché. Quelqu'un connaît-il une solution?

csshtmlalignmentpositioning
19
Prakash GPz

Pour aligner un div en bas, vous devez d'abord rendre la position du div parent relative. définissez ensuite la position de div requise sur absolu et définissez la propriété bottom sur zéro.

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>
24
Thomas C. Rodriguez

Le div footer devra être soit:

  • position:absolute;bottom:0;; Cela le poussera vers le bas de son conteneur, cependant, lorsque vous faites défiler le conteneur, le pied de page défile avec lui.

  • position:fixed;bottom:0;; Ceci est utilisé plus souvent pour les pieds de page sticky. Cela placera le pied de page à bottom:0 de votre écran. donc peu importe où vous faites défiler, ce que vous voyez est ce que vous obtenez (il ne se déplacera pas pendant le défilement)

  • position:relative;bottom:0;; pourrait être utilisé, mais il sera relatif à ses frères et sœurs (c'est-à-dire à moins que le content div le pousse vers le bas, il n'y ira pas), ou, je crois que si le conteneur est relative alors cela peut fonctionner (mais s'il vous plaît corrigez-moi si je me trompe).

Basé sur votre question: i want the footer div to stick at the bottom of outer wrapper. il semble que vous souhaitiez utiliser le positionnement absolute pour le pied de page, de manière à ce qu'il reste toujours au fond de son conteneur ....

Si vous voulez que le pied de page reste en bas de l'écran peu importe où l'utilisateur défile, alors je recommanderais le positionnement de fixed.

Vérifiez certainement certains ... tutoriels et surtout, déconnez et expérimentez-vous!

vous pouvez nous faire un jsfiddle et peut-être que cela vous éclairera davantage sur ce que vous essayez d'accomplir. bonne chance!

11
d-_-b

Vous pouvez laisser la position de l'encapsuleur relative et la position intérieure des Divs absolue.

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

Essayez ceci http://jsfiddle.net/YAaA3/

6
phnkha
<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>
2
Jeffrey

utilisez un clair pour obtenir le pied de page sous le contenu.

simplement -

#header {
 clear:both;
}
#footer {
 clear: both;
}

Cela devrait forcer l'en-tête à être au-dessus et le pied de page à tomber sous les éléments flottants.

2
Drew Dahlman

[ [~ # ~] mis à jour [~ # ~] ]

Voici le CSS qui toujours colle le pied de page au bas.

* [~ # ~] démo [~ # ~] *

CSS-

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#ou {
    position:relative;
    background-color:grey;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:400px;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#he
{
    height:30px;
    background-color:red;
}
#fo{
    background-color:yellow;
    height: 30px; /* .Push must be the same height as .footer */
    position:relative;
    width:400px;
    margin:0 auto;
}
0
Cdeez