web-dev-qa-db-fra.com

Comment puis-je positionner ma div au bas de son conteneur?

Étant donné le code HTML suivant:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Je voudrais que #copyright se colle au bas de #container.

Puis-je y parvenir sans utiliser le positionnement absolu? Si la propriété float prend en charge une valeur 'bottom', il semble que cela conviendrait, mais malheureusement, ce n'est pas le cas.

htmlcss
681
Dónal

Probablement pas.

Attribuez position:relative à #container, puis position:absolute; bottom:0; à #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
855
User

En fait, la réponse acceptée par @User ne fonctionnera que si la fenêtre est haute et le contenu court. Mais si le contenu est haut et que la fenêtre est courte, les informations de copyright seront placées sur le contenu de la page, puis un défilement vers le bas pour voir le contenu vous laissera un avis de copyright flottant. Cela rend cette solution inutile pour la plupart des pages (comme cette page, en fait).

La méthode la plus courante consiste à utiliser l’approche "CSS Sticky Footer", ou une variante légèrement plus fine. Cette approche fonctionne très bien - SI vous avez un pied de page à hauteur fixe.

Si vous avez besoin d'un pied de page à hauteur variable qui apparaîtra au bas de la fenêtre si le contenu est trop court et au bas du contenu si la fenêtre est trop courte, que faites-vous?

Avalez votre fierté et utilisez une table.

Par exemple:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

Essaye le. Cela fonctionnera pour n'importe quelle taille de fenêtre, pour n'importe quelle quantité de contenu, pour n'importe quel pied de taille, sur tous les navigateurs ... même IE6.

Si vous craignez d'utiliser une table pour la mise en page, prenez une seconde pour vous demander pourquoi. CSS était censé nous faciliter la vie - et il l’a généralement fait - mais le fait est que même après toutes ces années, le désordre est toujours brisé et contre-intuitif. Cela ne peut pas résoudre tous les problèmes. C'est incomplet.

Les tables ne sont pas cool, mais au moins pour le moment, elles constituent parfois le meilleur moyen de résoudre un problème de conception.

334
Rick Reilly

L'approche flexbox!

Dans navigateurs pris en charge , vous pouvez utiliser les éléments suivants:

Exemple ici 

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

La solution ci-dessus est probablement plus flexible, cependant, voici une solution alternative:

Exemple ici 

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

En remarque, vous souhaiterez peut-être ajouter des préfixes de fournisseur pour une assistance supplémentaire.

137
Josh Crozier

Oui vous pouvez le faire sans absolute positionnement et sans utiliser tables (qui visse avec un balisage, etc.).

DÉMO
Ceci est testé pour fonctionner sur IE> 7, chrome, FF et est une chose très facile à ajouter à votre mise en page existante.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

Il fait effectivement ce que float:bottom voudrait, même en tenant compte du problème signalé dans la réponse de @Rick Reilly!

110
Hashbrown

C'est une vieille question, mais c'est une approche unique qui peut aider dans plusieurs cas.

CSS pur, sans positionnement absolu, sans correction de hauteur, navigateur croisé (IE9 +)

vérifier que travail de violon

Parce que le flux normal est "de haut en bas", nous ne pouvons pas simplement demander au #copyright div de s'en tenir au bas de son parent sans un positionnement absolu, mais si nous voulions le #copyright div s'en tenir au sommet de son parent, ce sera très simple - parce que c'est la voie d'écoulement normale.

Nous allons donc utiliser cela à notre avantage. nous allons changer l'ordre des divs dans le code HTML, le #copyright div est maintenant en haut et le contenu le suit immédiatement. nous faisons également en sorte que le contenu soit complètement étendu (en utilisant des pseudo-éléments et des techniques de clarification)

il ne reste plus qu'à inverser cet ordre dans la vue. cela peut être facilement fait avec la transformation CSS.

Nous tournons le conteneur de 180 degrés, et maintenant: up-is-down. (et nous inversons le contenu pour revenir à la normale)

Si nous voulons avoir un scroolbar dans la zone de contenu, nous devons appliquer un peu plus de magie CSS. comme on peut le voir Ici [dans cet exemple, le contenu est sous un en-tête - mais c'est la même idée]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>
20
avrahamcool

Essaye ça;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>
6
Gary Green

Bien qu'aucune des réponses fournies ici ne semble s'appliquer ou fonctionner dans mon cas particulier, je suis tombé sur cet article qui fournit cette solution intéressante:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

Je trouve cela très utile d’appliquer responsive design pour un affichage mobile sans avoir à réorganiser tout le code html d’un site Web, en définissant body comme un tableau.

Notez que seul le premier table-footer-group ou table-header-group sera rendu en tant que tel: s'il y en a plus d'un, les autres seront rendus en tant que table-row-group.

5
Skippy le Grand Gourou

Créez un autre conteneur div pour les éléments ci-dessus #copyright. Juste au-dessus des droits d'auteur, ajoutez une nouvelle div: <div style="clear:both;"></div> Cela forcera le pied de page à tout le reste, comme dans le cas d'utilisation du positionnement relatif (bottom:0px; ).

5
Rápli András

Vous pouvez en effet align la boîte au bottom sans utiliser _position:absolute_ si vous connaissez le height du _#container_ en utilisant alignement du texte caractéristique des éléments _inline-block_.

Ici vous pouvez le voir en action.

C'est le code:

_#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}
_
4
jacmkno

lien CodePen ici .

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>
3
azizarslan

Utilisation de la propriété translateY et top

Définissez simplement l'élément child sur position: relative et déplacez-le top: 100% (c'est la hauteur de 100% du parent) et restez au bas du parent en transformant: translateY (-100%) (c'est -100% de la hauteur de l'enfant).

Avantages

  • vous ne le faites pas prenez l'élément dans le flux de pages
  • c'est dynamique

Mais toujours juste contournement :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

N'oubliez pas les préfixes de l'ancien navigateur.

3
Samuell

Si vous voulez qu'il "colle" au fond, quelle que soit la hauteur du conteneur, le positionnement absolu est la solution. Bien entendu, si l'élément copyright est le dernier élément du conteneur, il sera toujours en bas de toutes façons.

Pouvez-vous développer votre question? Expliquez exactement ce que vous essayez de faire (et pourquoi vous ne voulez pas utiliser le positionnement absolu)?

2
Jack Sleight

De plus, si vous utilisez position:absolute; ou position:relative;, vous pouvez toujours essayer paddingparentdiv ou mettre un margin-top:x;. Ce n'est pas une très bonne méthode dans la plupart des cas, mais cela peut être utile dans certains cas.

2
Ghost Echo

Peut-être que cela aide quelqu'un: vous pouvez toujours placer la div en dehors de l'autre div, puis poussez-la vers le haut en utilisant une marge négative:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>
1
DesignConsult

Si vous ne connaissez pas la hauteur du bloc enfant:

    #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
    .child{background:red;vertical-align:bottom;}

  </style>
</head>
<body>

<div id="parent">
  <div class="child">child
  </div> 
  </div>

http://jsbin.com/ULUXIFon/3/edit

Si vous connaissez la hauteur du bloc enfant, ajoutez le bloc enfant, puis ajoutez padding-top/margin-top:

    #parent{background:green;width:200px;height:130px;padding-top:70px;}
    .child{background:red;vertical-align:bottom;height:130px;}

<div id="parent">
  <div class="child">child
  </div> 
  </div>
1
zloctb

Il n'y a rien appelé float:bottom en CSS. Le meilleur moyen consiste à utiliser le positionnement dans de tels cas:

position:absolute;
bottom:0;
1
Touhid Rahman

Pour ceux qui n'ont qu'un enfant dans le conteneur, vous pouvez utiliser les méthodes table-cell et vertical-align qui ont fonctionné de manière fiable pour positionner une seule div au bas de son parent.

Notez que l'utilisation de table-footer-group comme autres réponses mentionnées rompra le calcul de la hauteur du parent table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
<div id="container">
    <div id="item">Single bottom item</div>
</div>
0
Hai Zhang

CSS Grid

Puisque l'utilisation de CSS Grid est en augmentation, je voudrais suggérer align-self à l'élément qui est à l'intérieur un conteneur de grille.

_align-self_ peut contenir n'importe quelle valeur: end, _self-end_, _flex-end_ pour l'exemple suivant.

_#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}_
_<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>_
0
Manoj Kumar

Voici une approche visant à faire flotter vers la droite un élément dont la hauteur et la largeur sont connues (au moins approximativement) et rester au bas, tout en se comportant comme un élément en ligne par rapport aux autres éléments. Il se concentre en bas à droite car vous pouvez le placer facilement dans un autre coin en utilisant d'autres méthodes.

Je devais créer une barre de navigation contenant les liens en bas à droite et des éléments aléatoires, tout en veillant à ce que la barre s’étire correctement, sans perturber la présentation. J'ai utilisé un élément "shadow" pour occuper l'espace des liens de la barre de navigation et je l'ai ajouté à la fin des nœuds enfants du conteneur.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
0
Zyox

Juste parce que cela n’a pas du tout été mentionné, ce qui marche habituellement bien dans des situations comme la vôtre:

Placer le copyright-div after le conteneur-div

Vous n'auriez qu'à formater le copyright-div de la même manière que l'autre conteneur (même largeur totale, même centrage, etc.), et tout va bien.

CSS: 

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML: 

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

La seule fois où cela pourrait ne pas être idéal est lorsque votre conteneur-div est déclaré avec height:100%, et que l'utilisateur devra faire défiler l'écran vers le bas pour voir le droit d'auteur. Mais même quand même, vous pouvez contourner le problème (par exemple, margin-top:-20px - lorsque la hauteur de votre élément copyright est de 20 pixels).

  • Pas de positionnement absolu
  • Pas de disposition de table
  • Pas de css fou, qui a l'air différent dans tous les autres navigateurs (enfin IE au moins, vous savez)
  • Mise en forme simple et claire

De plus, je sais que le PO a demandé une solution qui "... colle au bas de la fenêtre 'conteneur' ..." , et non Quelque chose en dessous, mais bon, les gens cherchent de bonnes solutions ici, et celle-ci en est une!

0
Levit
 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
0
Anmol Ratan Mohla