Positionnement d'un div près du bas d'un autre div

102

J'ai un div externe et un div interne. J'ai besoin de placer la div intérieure au bas de la div externe.

La div externe est élastique (largeur: 70% par exemple). J'ai également besoin de centrer le bloc intérieur.

Un modèle simple de maquillage décrit est montré sur l'image ci-dessous:

entrez la description de l'image ici

html css layout

— romain
source

la hauteur est-elle également élastique? Si ce n'est pas le cas, vous pouvez définir la marge supérieure de la zone intérieure sur (externalBoxHeight - innerBoxHeight).

— peirix

@peirix: oui, la hauteur du bloc extérieur peut changer et nous ne le savons pas

— Roman

79

Testé et fonctionne sur Firefox 3, Chrome 1 et IE 6, 7 et 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

Version en direct ici: http://jsfiddle.net/RichieHindle/CresX/

— RichieHindle
source

Merci, votre solution est presque correcte. Je n'ai eu qu'à ajouter "// margin-left: -40px" au style du bloc vert pour IE. Sans ce hack avec l'attribut margin-left, votre bloc vert a été éliminé à gauche dans IE7. Quelqu'un peut-il expliquer d'où vient ce 40px?

— Roman

IE7 positionnait horizontalement le div vert après le mot "Outer". J'ai mis à jour le code pour spécifier "gauche: 0".

— RichieHindle

13

Vous avez besoin d'un div d'emballage pour celui du bas, afin de le centrer.

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

— Magnar
source

7

CSS3 Flexboxpermet le positionnement bas très facilement. Consultez le tableau de support Flexbox

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

Production:

Afficher l'extrait de code

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

Développer l'extrait

— m4n0
source

5

Fonctionne bien sur tous les navigateurs, y compris ie6.

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

— Dmitri Farkov
source

les 95% supérieurs ne sont pas la même chose que de dire les 10 pixels inférieurs. Vous voulez que la boîte intérieure soit ancrée en bas lorsque l'écran est redimensionné.

— user959690