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


Compte tenu du code HTML suivant:

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

J'aimerais #copyright coller au fond de #container.

Puis-je y parvenir sans utiliser le positionnement absolu? Si la propriété float supporte une valeur de 'bottom', il semble que cela fera l'affaire, mais malheureusement, ce n'est pas le cas.


624
2018-02-08 17:08


origine


Réponses:


Probablement pas.

Attribuer position:relative à #container, et alors position:absolute; bottom:0; à #copyright.


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


786
2018-02-08 17:13



En fait, la réponse acceptée par @User ne fonctionnera que si la fenêtre est haute et le contenu est court. Mais si le contenu est grand et la fenêtre est courte, il mettra les informations de copyright sur le contenu de la page, puis en faisant défiler vers le bas pour voir le contenu vous laissera une notice de copyright flottante. Cela rend cette solution inutile pour la plupart des pages (comme cette page, en fait).

La façon la plus courante de le faire est l'approche «CSS sticky footer» démontrée, ou une variation légèrement plus mince. Cette approche fonctionne très bien - SI vous avez un pied de page de taille fixe.

Si vous avez besoin d'un pied de page de hauteur variable qui apparaîtra en bas de la fenêtre si le contenu est trop court, et en 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 chaque navigateur ... même IE6.

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

Les tableaux ne sont pas cool, mais au moins pour l'instant, ils sont parfois la meilleure façon de résoudre un problème de conception.


308
2018-02-01 03:53



Oui vous pouvez le faire sans absolute positionnement et sans utiliser tables (qui vis avec le balisage et autres).

DEMO
Ceci est testé pour fonctionner sur IE> 7, chrome, FF & 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 quoi float:bottom serait, même en tenant compte de la question souligné dans la réponse @Rick Reilly!


100
2017-10-01 07:16



L'approche flexbox!

Dans navigateurs pris en charge, vous pouvez utiliser ce qui suit:

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 pouvez ajouter des préfixes de fournisseur pour un support supplémentaire.


98
2018-01-07 05:04



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

Pure CSS, sans positionnement absolu, sans fixation de hauteur, navigateur croisé (IE9 +)

vérifier que Violon de travail

Parce que le flux normal est «de haut en bas», nous ne pouvons pas simplement demander #copyright div de coller au fond de son parent sans absolument le positionnement d'une sorte, Mais si nous voulions le #copyright div pour coller 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 de la divs dans le HTML, maintenant le #copyright div est en haut, et le contenu le suit tout de suite. nous faisons également étirer le contenu div tout le long (en utilisant des pseudo-éléments et des techniques de compensation)

maintenant il s'agit juste d'inverser cet ordre dans la vue. cela peut être facilement fait avec la transformation CSS.

Nous faisons pivoter le conteneur de 180deg, et maintenant: up-is-down. (et nous inversons le contenu pour avoir l'air normal à nouveau)

Si nous voulons avoir un scroolbar dans la zone de contenu, nous devons appliquer un peu plus de magie CSS. comme peut être montré Ici [Dans cet exemple, le contenu est en-dessous d'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>


19
2017-10-01 08:38



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>


7
2018-02-08 17:20



Créer un autre conteneur div pour les éléments ci-dessus #copyright. Juste au-dessus du copyright ajouter une nouvelle div:     <div style="clear:both;"></div> Cela va forcer le bas de page être sous tout le reste, tout comme dans le cas de l'utilisation du positionnement relatif (bottom:0px;).


5
2017-07-11 16:13



Vous pouvez en effet align la boîte à la bottom sans utiliser position:absolute si vous connaissez le height du #container en utilisant le Alignement du texte caractéristique de inline-block éléments.

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
2018-06-07 04:26



Lien ici.

HTML:

<div class="overlay">
    <div class="container">
        <div class="height">
          content
        </div>
    </div>

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

CSS:

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;
}

3
2017-07-11 15:38



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 soignée:

#container {
  display: table;
}

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

Je trouve cela très utile pour appliquer un design responsive pour l'affichage mobile sans avoir à réordonner tout le code html d'un site web, le réglage body lui-même comme une table.

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


3
2017-08-19 00:37