715 votos

¿Cómo puedo colocar mi div en la parte inferior de su contenedor?

Dado el siguiente HTML:

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

Me gustaría #copyright para que se pegue al fondo de #container . ¿Puedo conseguirlo sin utilizar el posicionamiento absoluto?

891voto

User Puntos 13983

Probablemente no.

Asignar position:relative a #container y luego position:absolute; bottom:0; a #copyright .


#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

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

341voto

Rick Reilly Puntos 2033

En realidad, la respuesta aceptada por @User sólo funcionará si la ventana es alta y el contenido es corto. Pero si el contenido es alto y la ventana es corta, pondrá la información de copyright sobre el contenido de la página, y luego al desplazarse hacia abajo para ver el contenido se encontrará con un aviso de copyright flotante. Esto hace que esta solución sea inútil para la mayoría de las páginas (como esta página, en realidad).

La forma más común de hacer esto es el enfoque de "pie de página pegajoso CSS" demostrado, o una variación ligeramente más delgada. Este enfoque funciona muy bien - si usted tiene un pie de página de altura fija.

Si necesita un pie de página de altura variable que aparezca en la parte inferior de la ventana si el contenido es demasiado corto, y en la parte inferior del contenido si la ventana es demasiado corta, ¿qué hace?

Trágate tu orgullo y usa una tabla.

Por ejemplo:

* {
    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>

Pruébalo. Esto funcionará para cualquier tamaño de ventana, para cualquier cantidad de contenido, para cualquier tamaño de pie de página, en todos los navegadores... incluso IE6.

Si te asusta la idea de utilizar una tabla para maquetar, tómate un segundo para preguntarte por qué. Se suponía que CSS iba a facilitarnos la vida -y lo ha hecho, en general-, pero el hecho es que, incluso después de todos estos años, sigue siendo un lío roto y contraintuitivo. No puede resolver todos los problemas. Está incompleto.

Las tablas no son geniales, pero al menos por ahora, a veces son la mejor manera de resolver un problema de diseño.

112voto

Hashbrown Puntos 1888

puede hacerlo sin absolute posicionamiento y sin utilizar table s (que se jode con las marcas y demás).

DEMO
Esto está probado para trabajar en IE>7, chrome, FF y es una cosa realmente fácil de añadir a su diseño existente.

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

Hace efectivamente lo que float:bottom sí, incluso teniendo en cuenta el problema señalado en la respuesta de @Rick Reilly.

20voto

avrahamcool Puntos 4651

Es una pregunta antigua, pero este es un enfoque único que puede ayudar en varios casos.

CSS puro, sin posicionamiento absoluto, sin fijar ninguna altura, Cross-Browser (IE9+)

comprueba que Fiddle de trabajo

Debido a que el flujo normal es "de arriba a abajo", no podemos simplemente pedir al #copyright div para pegarse a la parte inferior de su padre sin absolutamente posicionamiento de algún tipo, Pero si queríamos el #copyright div para pegarse a la parte superior de su padre, será muy simple - porque esta es la forma de flujo normal.

Así que vamos a utilizar esto en nuestra ventaja. cambiaremos el orden de los div s en el HTML, ahora el #copyright div está en la parte superior, y el contenido lo sigue enseguida. También hacemos que el div de contenido se extienda por completo (usando pseudo elementos y técnicas de limpieza)

ahora solo es cuestión de invertir ese orden en la vista. eso se puede hacer fácilmente con CSS transform.

Giramos el contenedor 180deg, y ahora: arriba-es-abajo. (y volvemos a invertir el contenido para que vuelva a parecer normal)

Si queremos tener una scroolbar dentro del área de contenido, tenemos que aplicar un poco más de magia CSS. como se puede mostrar Aquí [en ese ejemplo, el contenido está debajo de una cabecera - pero es la misma idea]

* {
  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>

7voto

Gary Hole Puntos 9736

Prueba esto;

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X