Pregunta ¿Cómo alinear el contenido de un div al fondo?


Digamos que tengo el siguiente código CSS y HTML:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

La sección del encabezado es de altura fija, pero el contenido del encabezado puede cambiar. Me gustaría que el contenido del encabezado se alinee verticalmente en la parte inferior de la sección del encabezado, de modo que la última línea de texto "se adhiera" a la parte inferior de la sección del encabezado.

Entonces, si solo hay una línea de texto, sería como:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

Y si hubiera tres líneas:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

¿Cómo se puede hacer esto en CSS?


955
2018-02-25 13:15


origen


Respuestas:


El posicionamiento relativo + absoluto es su mejor apuesta:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Pero puede tener problemas con eso. Cuando lo probé tuve problemas con los menús desplegables que aparecen debajo del contenido. Simplemente no es bonito.

Honestamente, para problemas de centrado vertical y, bueno, cualquier problema de alineación vertical con los artículos no es de altura fija, es más fácil simplemente usar tablas.

Ejemplo: ¿Puedes hacer este diseño HTML sin usar tablas?


1134
2018-02-25 13:20



Use el posicionamiento de CSS.

/* creates a new stacking context on the header */
#header {
  position: relative;
}

/* positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Como cletus notado, necesita identificar el contenido del encabezado para que esto funcione.

<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div> 

134
2018-02-25 13:18



Yo uso estas propiedades y funciona!

#header {
  display: table-cell;
  vertical-align: bottom;
}

100
2018-04-25 09:43



Si no está preocupado por los navegadores heredados, use un flexbox.

El elemento primario necesita su tipo de visualización configurado para flexionar

div.parent {
  display: flex;
  height: 100%;
}

Luego, establece el align-self del elemento secundario en flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Aquí está el recurso que solía aprender: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


76
2017-08-25 20:46



Después de luchar con este mismo problema durante algún tiempo, finalmente descubrí una solución que cumple con todos mis requisitos:

  • No requiere que conozca la altura del contenedor.
  • A diferencia de las soluciones relativas + absolutas, el contenido no flota en su propia capa (es decir, se incrusta normalmente en el contenedor div).
  • Funciona en todos los navegadores (IE8 +).
  • Simple de implementar.

La solución solo toma uno <div>, que llamo el "alineador":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Este truco funciona al crear un div alto y delgado que empuja la línea de base de texto hacia el fondo del contenedor.

Aquí hay un ejemplo completo que logra lo que el OP estaba pidiendo. He hecho el "bottom_aligner" grueso y rojo solo con fines de demostración.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Align bottom content


62
2017-07-18 17:11



Los elementos en línea o en bloque pueden alinearse con la parte inferior de los elementos de nivel de bloque si la altura de línea del elemento principal / bloque es mayor que la del elemento en línea. *

margen:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* asegúrate de estar en modo estándar


22
2017-12-04 22:16



La forma moderna de hacerlo sería usar Flexbox. Vea el ejemplo a continuación. Ni siquiera necesitas envolver Some text... en cualquier etiqueta HTML, ya que el texto contenido directamente en un contenedor flexible está envuelto en un elemento flexible anónimo.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Si solo hay algo de texto y desea alinearlo verticalmente en la parte inferior del contenedor.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>


21
2017-11-24 02:53



display: flex;
align-items: flex-end;

16
2018-04-24 04:31



Si tiene múltiples elementos dinámicos de altura, use los valores de visualización de CSS de table y table-cell:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

He creado una demostración de JSBin aquí: http://jsbin.com/INOnAkuF/2/edit

La demostración también tiene un ejemplo de cómo alinear verticalmente el centro usando la misma técnica.


3
2018-02-20 17:55