Alinear DIV al fondo o la línea de base

95

Estoy tratando de alinear una etiqueta div secundaria con la parte inferior o la línea de base de la etiqueta div principal.

Todo lo que quiero hacer es tener el Div hijo en la línea de base del Div padre, así es como se ve ahora:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Nota

Tendré múltiples childDivs con diferentes alturas, y las necesitaré todas para alinearse con la línea de base / parte inferior.

html css sia
fuente
ni siquiera estaba pensando! Acabo de eliminar la altura en el parentDiv y todo el childDiv ahora se sienta en la línea de base. ¡Soy solo una tonta sally!
sia
Pero si desea que tenga una altura específica, debe usar el absoluteposicionamiento de acuerdo con el padre.
Y. Shoham

Respuestas:

154

Necesitas agregar esto:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

Al declarar el absoluteelemento, se posiciona de acuerdo con su padre más cercano que no lo es static(debe ser absolute, relativeo fixed).

Y. Shoham
fuente
7
Dudo que esto haga lo que él quiere, actualmente esto colocará todos (parece que habrá varios elementos secundarios si es un gráfico de barras dinámico) uno encima del otro.
crmepham
52

Siete años después, las búsquedas de alineación vertical todavía plantean esta pregunta, por lo que publicaré otra solución que tenemos disponible ahora: posicionamiento flexbox. Simplemente configure display:flex; justify-content: flex-end; flex-direction: columnel div padre (demostrado en este violín también):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
gcbenison
fuente
1
Sencillo. Exactamente lo que quería. Úselo align-items: flex-start;si no desea estirar los artículos.
Madhan
¡Esta es la mejor respuesta en estos días!
Rens Groenveld
12

Utilice los valores de visualización CSS de la tabla y la celda de la tabla:

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 en el centro verticalmente usando la misma técnica.

Romiem
fuente
1
Por toda la mierda que se ponga en las mesas, a veces esta es la mejor solución
Sean256
esta fue la mejor solución para mí
bowlerae
Esto realmente es la mejor solución, ya que el uso de elementos con posición absoluta normalmente cambia la altura del elemento padre
hamncheez
7

esto funciona (solo probé ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

Espero que ayude.

pstanton
fuente
5

La respuesta publicada por Y. Shoham (usando posicionamiento absoluto) parece ser la solución más simple en la mayoría de los casos donde el contenedor tiene una altura fija, pero si el DIV principal tiene que contener varios DIV y ajustar automáticamente su altura en función del contenido dinámico, entonces puede haber un problema. Necesitaba tener dos bloques de contenido dinámico; uno alineado con la parte superior del contenedor y otro con la parte inferior y aunque pude hacer que el contenedor se ajustara al tamaño del DIV superior, si el DIV alineado con la parte inferior fuera más alto, no cambiaría el tamaño del contenedor sino que se extendería hacia afuera . El método descrito anteriormente por romiem que usa el posicionamiento estilo tabla, aunque un poco más complicado, es más robusto a este respecto y permite la alineación al fondo y la altura automática correcta del contenedor.

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

Ejemplo

Me doy cuenta de que esta no es una respuesta nueva, pero quería comentar sobre este enfoque, ya que me llevó a encontrar mi solución, pero como novato no se me permitió comentar, solo publicar.

Nick Gillard
fuente
3

Probablemente tendría que configurar el div secundario para tener position: absolute.

Actualice el estilo de su hijo a

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}
Ravia
fuente
Intenté eso, pero lo que necesito es que la parte inferior del childDiv se siente en la parte inferior del parentDiv, el gráfico debe ser dinámico y las alturas variarán de cada childDiv al siguiente ... el posicionamiento podría funcionar pero no lo he hecho dejar de descubrir algo que es sólido ...
sia
5
no es una buena idea establecer la parte superior en 207 (algún número arbitrario) mejor establecer la parte inferior: 0
pstanton
2

Una publicación antigua, pero pensé en compartir una respuesta para cualquiera que busque. Y porque cuando lo usas las absolutecosas pueden salir mal. Lo que yo haría es

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

El CSS

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

Y eso simplemente colocaría ese div inferior de nuevo en el div principal. seguro para la mayoría de los navegadores también


fuente
Esto haría que childDiv se encuentre en la mitad inferior del parentDiv. Necesita al menos usar -40px en el margen superior. También es la mejor práctica para usar la posición: relativa; en este caso para ambos divs.
Augus
1

Tuve algo similar y lo hice funcionar agregando efectivamente algo de relleno al niño.

Estoy seguro de que algunas de las otras respuestas aquí llegarían a la solución, pero no pude hacer que funcionen fácilmente después de mucho tiempo; En cambio, terminé con la solución acolchada que es elegante en su simplicidad, pero me parece un poco hackea (sin mencionar que el valor de píxel que establece probablemente dependería de la altura del padre).

cellepo
fuente
0 

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}
<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>
Expandir fragmento

Esta es mi solucion

NEM
fuente
-6

Si tiene múltiples Div hijos dentro de su Div padre, entonces puede usar la propiedad de alineación vertical algo como a continuación:

.Parent div
{
  vertical-align : bottom;
}
Pawan
fuente
¿Por qué tantos votos negativos para esto sin comentarios? ¿No resuelve el problema? Las investigaciones en línea sugieren que debería hacerlo.
sholsapp