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

div style background color

Question

Dado el siguiente HTML:

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

Me gustaría que #copyright adhiera a la parte inferior de #container .

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

Answer 1

Usando la propiedad de traducir y superior

Simplemente coloque el elemento child en posición: relativo y luego muévalo hacia arriba: 100% (esa es la altura del 100% del padre) y manténgalo en la parte inferior de la matriz mediante la transformación: translateY (-100%) (que es el 100% de la altura de el niño).

Beneficios

• No tomas el elemento del flujo de la página.
• es dinamico

Pero aún así solo solución :(

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

No olvide los prefijos para el navegador antiguo.

Answer 2

El enfoque flexbox!

En los navegadores compatibles , puede utilizar lo siguiente:

Ejemplo aquí

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

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

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

Answer 3

Además, si hay estipulaciones con el uso de position:absolute; o position:relative; , siempre puedes intentar padding div padre 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.

Answer 4

Crea otro contenedor div para los elementos arriba #copyright . Justo encima del copyright, agregue un nuevo div : <div style="clear:both;"></div> Forzará al pie de página a estar debajo de todo lo demás, al igual que en el caso de usar posicionamiento relativo ( bottom:0px; ).

Answer 5

De hecho, puede align el cuadro con la bottom sin usar la position:absolute si conoce la height del #container utilizando la función de alineación de texto de inline-block elementos de inline-block .

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

Answer 6

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

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

Answer 7

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, pondrá la información de derechos de autor sobre el contenido de la página, y luego, si se desplaza hacia abajo para ver el contenido, tendrá un aviso de copyright 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 hacer esto 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é hace?

Trágate tu orgullo y usa 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>

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

Si te encoges ante la idea de usar una tabla para el diseño, tómate un segundo para preguntarte por qué. Se suponía que CSS haría nuestras vidas más fáciles, y lo ha hecho, en general, 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.

Answer 8

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

CSS puro, sin posicionamiento absoluto, sin corregir cualquier altura, navegador cruzado (IE9 +)

Echa un vistazo a ese violín de trabajo

Debido a que el flujo normal es ''de arriba a abajo'', no podemos simplemente pedirle a la #copyright que se adhiera a la parte inferior de su padre sin posicionar absolutamente algún tipo, pero si queremos que la #copyright adhiera a la parte superior de Su padre, será muy simple, porque esta es la forma normal de flujo.

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 de inmediato. también hacemos que el contenido div se extienda todo el camino (utilizando 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 en 180 grados, y ahora: arriba-abajo-abajo. (Y volvemos a invertir el contenido para que se vea normal de nuevo).

Si queremos tener un scroolbar dentro del área de contenido, debemos aplicar un poco más de la magia CSS. como se puede mostrar Here [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>

Answer 9

Este es un enfoque dirigido a hacer que un elemento con una altura y anchura conocidas (al menos aproximadamente) flote hacia la derecha y permanezca en la parte inferior, mientras se comporta como un elemento en línea con los otros elementos. Está enfocado en la parte inferior derecha porque puede 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 de hermanos aleatorios, mientras me 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>

Answer 10

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

position:absolute;
bottom:0;

Answer 11

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

Tenga en cuenta que utilizar el table-footer-group como otras respuestas mencionadas romperá el cálculo de altura de la table principal.

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

Answer 12

Probablemente no.

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

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

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

Answer 13

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>

Answer 14

Si bien ninguna de las respuestas proporcionadas aquí pareció aplicarse o funcionar en mi caso particular, encontré este artículo que brinda esta solución clara:

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

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

Tenga en cuenta que solo el primer table-footer-group table-header-group o el table-footer-group table-header-group se representarán como tales: si hay más de uno, los otros se representarán como table-row-group .

Answer 15

Si desea que se "pegue" a la parte inferior, independientemente de la altura del contenedor, la posición absoluta 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)?

Answer 16

Si no conoces la altura del bloque infantil:

 #parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
.child{background:red;vertical-align:bottom;}
</style>
</head>
<body>
<div id="parent">
<div class="child">child
</div>
</div>

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>

Answer 17

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

Colocando el div copyright después del contenedor div.

Solo tendría que formatear el div de copyright de forma similar al otro contenedor (el mismo ancho general, 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>

La única vez que esto podría no ser ideal es cuando su contenedor-div se declara con height:100% , y el usuario tendría que desplazarse hacia abajo para ver los derechos de autor. Pero aún así podría margin-top:-20px (por ejemplo, margin-top:-20px - cuando la altura de su elemento de copyright es 20px).

• Sin posicionamiento absoluto
• Sin diseño de tabla
• No css loco, que se ve diferente en todos los demás navegadores (bueno IE al menos, ya sabes)
• Formato simple y claro.

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

Answer 18

Tal vez esto ayude a alguien: siempre puedes colocar el div fuera del otro div y luego empujarlo hacia arriba usando 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>

Answer 19

Enlace aquí .

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

Answer 20

Sí , puede hacer esto sin posicionamiento absolute y sin usar table (que se atornillan con marcas y demás).

DEMO
Se ha comprobado que esto funciona en IE> 7, chrome, FF y es algo muy fácil de agregar 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;
}

Efectivamente hace lo que float:bottom , ¡incluso tomando en cuenta el problema señalado en la respuesta de @Rick Reilly!

Answer 21

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

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