741

Dado el siguiente HTML:

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

Me gustaría #copyright en el fondo de #container.

¿Puedo lograr esto sin utilizar el posicionamiento absoluto? Si la propiedad flotante admitiera un valor de 'fondo', parece que funcionaría, pero desafortunadamente no lo hace.

html css Dónal
fuente

211

Esta situación es una de las razones por las que las tablas de diseño aún no se han ido. Hacer esto con una mesa es muy simple y funciona en todas partes. Hacer esto en CSS es muy difícil y la compatibilidad entre navegadores es regular. Sin mencionar que es imposible recordar cómo hacerlo bien.

Tomalak

No entiendo la pregunta. ¿Por qué necesita utilizar el posicionamiento absoluto? ¿El contenedor tiene una altura establecida, independientemente del contenido que contiene?

HartleySan

924

Probablemente no.

Asignar position:relativea #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>

Expandir fragmento

Usuario
fuente

11

Si position: relative en su contenedor rompe su diseño, recuerde que solo puede incluir una división de envoltura dentro del contenedor con una altura del 100%, y agregue position: relative a eso en su lugar.

Jack Shepherd

y si es para elementos que se repiten, ¿qué se colocaría uno encima del otro?

CRice

66

Un elemento absolutamente posicionado busca su padre más cercano que sea absoluto o relativamente posicionado para determinar su posición. Si todo falla, recurre al cuerpo (ventana). De ahí la necesidad de que el padre sea relativo.

user17753

1

agregue un margen inferior a #container para evitar los derechos de autor sobre el contenido de la página

Doc Kodam

1

El enfoque de Flexbox a continuación es mucho mejor.

woohoo

345

En realidad, la respuesta aceptada por @User solo funcionará si la ventana es alta y el contenido es corto. Pero si el contenido es alto y la ventana es corta, colocará la información de derechos de autor sobre el contenido de la página, y luego se desplazará hacia abajo para ver el contenido y le dejará un aviso de derechos de autor flotante. Eso 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 hacerlo es el enfoque de "pie de página adhesivo CSS" demostrado, o una variación ligeramente más delgada. Este enfoque funciona muy bien: SI tiene un pie de página de altura fija.

Si necesita un pie de página de altura variable que aparecerá 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é debe hacer?

Trague su orgullo y use una mesa.

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>

Expandir fragmento

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

Si te da miedo pensar en usar una tabla para el diseño, tómate un segundo para preguntarte por qué. Se suponía que CSS facilitaría nuestras vidas, y en general lo ha hecho, pero el hecho es que, incluso después de todos estos años, sigue siendo un desastre roto y contraintuitivo. No puede resolver todos los problemas. Esta incompleto.

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

Rick Reilly
fuente

80

Parece la mejor respuesta para mí. Además, siempre puede usar "tablas css" (display: table [-row / -cell]) en lugar de tablas html. Eso proporciona el mismo diseño sin la semántica.

chiccodoro

1

Si tiene una secuencia de comandos PHP / otra secuencia de comandos que genera su página, puede duplicar su pie de página, utilizando uno como un "espaciador" oculto y uno colocado absolutamente. El pie de página espaciador asegura que no importa cuánto contenido tenga en su pie de página, no subirá la página.

Tyzoid

20

Para otros que leen estos comentarios: esto no tiene nada que ver con "orgullo" o ser "genial". Usar tablas para el diseño es pragmáticamente aún más doloroso, especialmente para grandes cantidades de contenido. Asegurarse de no perderse un td y examinar tantas marcas irrelevantes al agregar contenido es un infierno. Es una molestia porque estamos creando documentos HTML , no solo diseños, y si la mayor parte del contenido de nuestro documento no son datos tabulares, ¿por qué lo ponemos en tablas? Si no nos gusta usar las tecnologías web de la manera en que fueron diseñadas, ¿por qué usarlas? Utilice aplicaciones de escritorio / móviles para publicar contenido en su lugar

gabe

1

@chiccodoro He implementado un equivalente sin tabla que es sorprendentemente mínimo, verifique mi respuesta a continuación

Hashbrown

59

El orgullo es irrelevante. Las tablas no deben usarse para el diseño, debido a razones de accesibilidad. Si alguna vez ha usado un lector de pantalla, sabrá por qué las tablas deben usarse solo para datos tabulares. Use tablas css como estados @chiccodoro.

Matt Fellows

171

El enfoque flexbox!

En los navegadores compatibles , puede usar lo siguiente:

Ejemplo aquí

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

Mostrar fragmento de código

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

Expandir fragmento

La solución anterior es probablemente más flexible, sin embargo, aquí hay una solución alternativa:

Ejemplo aquí

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

Mostrar fragmento de código

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

Expandir fragmento

Como nota al margen, es posible que desee agregar prefijos de proveedor para obtener soporte adicional.

Josh Crozier
fuente

3

¿ column-reverseQué tal el padre, para que no necesite agregar nada al niño en absoluto?

Max Waterman

1

Probablemente esta debería ser la respuesta aceptada: sin trucos, sin posicionamiento absoluto, el desbordamiento funciona limpiamente cuando es necesario (fue para mí).

Adverbly

114

Sí , puede hacerlo sin absoluteposicionar y sin usar tables (que se atornilla con marcas y demás).

MANIFESTACIÓN
Esto se ha probado para que funcione en IE> 7, Chrome, FF y es algo muy fácil de agregar a su diseño actual.

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

¡Efectivamente hace lo que float:bottomharía, incluso teniendo en cuenta el problema señalado en la respuesta de @Rick Reilly!

Hashbrown
fuente

1

¡Agradable! Solo una nota, IIRC necesita el <!DOCTYPE>conjunto para que esto funcione en IE (<= 8 al menos); esas versiones anteriores solo son compatibles display:table-XXXcon el modo "estándar". Pero el modo estándar también romperá muchas páginas que fueron diseñadas para, por ejemplo, IE6.

David

3

También puede usar flexbox - stackoverflow.com/questions/526035/…

Josh Crozier el

2

Encontré más suerte con .foot{display: table-footer-group}. No necesitaba vertical-align, heighto border-collapse.

Jacob Valenta

¿Funcionaría si #containersolo estuviera contenido #footy no tuviera otro contenido?

Consuelo

parece que al menos necesitaría un espacio sin interrupciones , @Solace

Hashbrown

20

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

CSS puro, sin posicionamiento absoluto, sin fijar ninguna altura, navegador cruzado (IE9 +)

mira ese violín de trabajo

Debido a que el flujo normal es 'de arriba a abajo', no podemos simplemente pedirle al #copyrightdiv que se adhiera al fondo de su padre sin un posicionamiento absoluto de algún tipo, pero si quisiéramos que el #copyrightdiv se adhiera a la parte superior de su padre, será muy simple, porque esta es la forma de flujo normal.

Entonces usaremos esto en nuestra ventaja. cambiaremos el orden de las divs en el HTML, ahora el#copyright div está en la parte superior y el contenido lo sigue de inmediato. también hacemos que el contenido div se extienda por completo (utilizando pseudo elementos y técnicas de borrado)

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

Giramos el contenedor 180 grados y ahora: arriba-abajo. (e invertimos el contenido para que se vea normal nuevamente)

Si queremos tener una barra de scrool dentro del área de contenido, necesitamos aplicar un poco más de magia CSS. como se puede mostrar aquí [en ese ejemplo, el contenido está debajo de un encabezado, 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>

Expandir fragmento

avrahamcool
fuente

2

Por favor no, mira lo horrible que es el renderizado ahora i.stack.imgur.com/ZP9Hw.png

grg

7

Cree otro contenedor divpara los elementos anteriores #copyright. Justo por encima de los derechos de autor, agregue un nuevo div: <div style="clear:both;"></div> obligará al pie de página a estar debajo de todo lo demás, al igual que en el caso del uso de posicionamiento relativo ( bottom:0px;).

Rápli András
fuente

7

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>

Gary Green
fuente

1

@Feelsbadman Por favor, no cambie el código de otras personas en respuestas como esa. Si tenía la intención de separar el CSS del HTML, tenga en cuenta que sin darse cuenta cambió el código a otra cosa, posiblemente invalidando la respuesta y ciertamente cambiando la intención del póster.

TylerH el

6

Si bien ninguna de las respuestas proporcionadas aquí parecía aplicarse o funcionar en mi caso particular, me encontré con este artículo que proporciona esta solución ordenada:

#container {
  display: table;
}

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

Me resulta muy útil para aplicar un diseño receptivo para pantallas móviles sin tener que reordenar todo el código html de un sitio web, configurando body como una tabla.

Tenga en cuenta que solo el primero table-footer-groupo table-header-groupse representará como tal: si hay más de uno, los demás se representarán como table-row-group.

Skippy le Grand Gourou
fuente

6

CSS Grid

Como el uso de CSS Grid está aumentando, me gustaría sugerirle align-selfal elemento que está dentro de un contenedor de cuadrícula.

align-selfpueden contener cualquiera de los valores: end, self-end, flex-endpara el siguiente ejemplo.

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

Expandir fragmento

Manoj Kumar
fuente

5

De hecho, puede usar alignel cuadro bottomsin usar position:absolutesi conoce heightel #containeruso de la función de alineación de texto deinline-block elementos.

Aquí puedes verlo en acción.

Este es el código:

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

jacmkno
fuente

5

Usando la traducción y la propiedad superior

Simplemente configure el elemento secundario en la posición: relativo y luego muévalo hacia arriba: 100% (esa es la altura del 100% del elemento primario) y manténgase en la parte inferior del elemento primario mediante transform: translateY (-100%) (eso es -100% de la altura de el niño).

Beneficios

tu no toma el elemento del flujo de la página
es dinámico

Pero todavía solo solución :(

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

No olvide los prefijos para el navegador anterior.

Samuell
fuente

4

Enlace CodePen aquí .

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>

Expandir fragmento

azizarslan
fuente

3

Si desea que se "pegue" al fondo, independientemente de la altura del contenedor, entonces el posicionamiento absoluto es el camino a seguir. Por supuesto, si el elemento de copyright es el último en el contenedor, siempre estará en la parte inferior de todos modos.

¿Puedes ampliar tu pregunta? ¿Explica exactamente lo que estás tratando de hacer (y por qué no quieres usar el posicionamiento absoluto)?

Jack Sleight
fuente

2

Además, si hay estipulaciones con el uso de position:absolute;o position:relative;, siempre puede intentar padding padre div o poner un margin-top:x;. No es un método muy bueno en la mayoría de los casos, pero puede ser útil en algunos casos.

Echo fantasma
fuente

1

Tal vez esto ayude a alguien: siempre puede colocar el div fuera del otro div y luego empujarlo hacia arriba con un margen negativo:

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

DesignConsult
fuente

1

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

Expandir fragmento

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

Expandir fragmento

Anmol Ratan Mohla
fuente

1

No quiera usar "position: absolute" para pie de página adhesivo en la parte inferior. Entonces puedes hacer esto:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

Expandir fragmento

nilesh pawar
fuente

Hola nilesh Esta solución ya se proporciona en múltiples respuestas. ¡Asegúrese de leer todas las respuestas existentes a una pregunta antes de proporcionar una nueva, para asegurarse de que no haya duplicación de contenido!

TylerH

1

Si no conoce la altura del bloque secundario:

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

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

Expandir fragmento

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

Si conoce la altura del bloque secundario, agregue el bloque secundario y luego agregue 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>

Expandir fragmento

zloctb
fuente

0

Solo porque esto no se ha mencionado en absoluto, lo que generalmente funciona bien en situaciones como la suya:

Colocando el copyright-div después del contenedor-div

Solo tendría que formatear el copyright-div de manera similar al otro contenedor (el mismo ancho total, centrado, etc.), y todo está 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>

El único momento en que esto podría no ser ideal es cuando se declara su container-div height:100%y el usuario debería desplazarse hacia abajo para ver los derechos de autor. Pero aún así podría evitar (por ejemplo margin-top:-20px, cuando la altura de su elemento de copyright es 20px).

Sin posicionamiento absoluto
No hay diseño de mesa
Sin CSS loco, que se ve diferente en cualquier otro navegador (bueno, IE al menos, ya sabes)
Formato simple y claro

Aparte: sé que el OP solicitó una solución que "... se adhiera al fondo del 'contenedor' div ..." , y no algo debajo, pero vamos, la gente está buscando buenas soluciones aquí, y esto ¡es uno!

Levita
fuente

En el caso de OP, esta solución solo es buena si #copyright tiene una altura fija (entonces podría configurarlo margin-top: -{element height}.

Gajus

@Gajus: Este no es un posicionamiento absoluto ni fijo. Esto hace exactamente lo que quiere el OP (sin importar la altura del copyright), con la única excepción de que el copyright-div no está EN el primer contenedor. ¡El OP pidió que los derechos de autor se peguen en la parte inferior del contenedor, no en la página!

Levite

Lo siento, quiero decir si el contenedor de # container tiene una altura fija.

Gajus

A menos que me equivoque, el problema real que OP está tratando de resolver es la parte inferior del elemento cuando la altura del elemento es dictada por otro elemento, por ejemplo, con comentarios jsbin.com/acoVevI/3 . Aquí no puede simplemente colocar el botón fuera del contenedor . Para ilustrar mejor el problema, consulte jsbin.com/acoVevI/4 .

Gajus

El OP dijo: "Me gustaría que #copyright se quede en la parte inferior de #container", por lo que esto no está totalmente claro en la pregunta. Además, este es un ejemplo válido para cualquier caso en el que simplemente debería "pegarse al fondo de #container". Esta solución debería ser útil, tiene un enfoque limpio y funciona bien para muchos diseños. Por ejemplo, cualquier página con contenido desplazable, como stackoverflow.com ;-)

Levite

0

Aquí hay un enfoque dirigido a hacer que un elemento con una altura y ancho conocidos (al menos aproximadamente) flote hacia la derecha y permanezca en la parte inferior, mientras se comporta como un elemento en línea para los otros elementos. Está enfocado en la esquina inferior derecha porque puedes colocarlo fácilmente en cualquier otra esquina a través de otros métodos.

Necesitaba hacer una barra de navegación que tuviera los enlaces reales en la parte inferior derecha y elementos hermanos aleatorios, al tiempo que se aseguraba de que la barra se estirara correctamente, sin interrumpir el diseño. Utilicé un elemento "sombra" para ocupar el espacio de los enlaces de la barra de navegación y lo agregué al final de los nodos secundarios del contenedor.

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

Zyox
fuente

0

No hay nada llamado float:bottomen CSS. La mejor manera es usar el posicionamiento en tales casos:

position:absolute;
bottom:0;

Touhid Rahman
fuente

Por favor explique su respuesta.

Mohit Raj Purohit

0

Para aquellos que solo tienen un hijo en el contenedor, puede usar el table-cellyvertical-align enfoque que funcionó de manera confiable para colocar un solo div en la parte inferior de su padre.

Tenga en cuenta que el uso table-footer-groupcomo otras respuestas mencionadas romperá el cálculo de altura del padre 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>

Expandir fragmento

Hai Zhang
fuente

0

De acuerdo: w3schools.com

Un elemento con posición: absoluto; se posiciona en relación con el ancestro posicionado más cercano (en lugar de posicionado en relación con la ventana gráfica, como fijo).

Por lo tanto, debe colocar el elemento padre con algo relativo o absoluto, etc. y colocar el elemento deseado en absoluto y luego establecer el fondo en 0.

Jonas Freire
fuente

Esto ya se menciona en la respuesta aceptada (entre otras).

TylerH

-1

Div de estilo, position:absolute;bottom:5px;width:100%;está funcionando, pero requirió más situación de desplazamiento.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

nicejay
fuente

¿Cómo puedo colocar mi div en el fondo de su contenedor?

Respuestas:

El enfoque flexbox!

CSS puro, sin posicionamiento absoluto, sin fijar ninguna altura, navegador cruzado (IE9 +)

CSS Grid

Usando la traducción y la propiedad superior