html - poner - posicionar div abajo

¿Cómo puedo hacer que un div flote al fondo de su contenedor?

Question

Esta pregunta ya tiene una respuesta aquí:

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

He flotado imágenes y cuadros de recuadros en la parte superior de un contenedor utilizando flotar: derecha (o izquierda) muchas veces. Recientemente, tuve la necesidad de hacer flotar un div en la esquina inferior derecha de otro div con el ajuste de texto normal que obtienes con float (texto envuelto arriba y solo a la izquierda).

Pensé que esto debería ser relativamente fácil, aunque float no tiene un valor inferior, pero no he podido hacerlo utilizando varias técnicas y la búsqueda en la web no ha dado con nada más que el uso de posicionamiento absoluto, pero esto no dar el correcto comportamiento de ajuste de palabras.

Pensé que este sería un diseño muy común pero aparentemente no lo es. Si nadie tiene una sugerencia, tendré que dividir mi texto en cuadros separados y alinear el div manualmente, pero eso es bastante precario y no me gustaría tener que hacerlo en cada página que lo necesite.

EDITAR: Sólo una nota para cualquiera que venga aquí. La pregunta vinculada anteriormente como un duplicado no es un duplicado. El requisito de que el texto se ajuste alrededor del elemento de inserción lo hace completamente diferente. De hecho, la respuesta a la respuesta más votada aquí deja claro por qué la respuesta en la pregunta vinculada es incorrecta como respuesta a esta pregunta. De todos modos, todavía no parece haber una solución general para este problema, pero algunas de las soluciones publicadas aquí y en la pregunta vinculada pueden funcionar para casos específicos.

Answer 1

A eligió este enfoque de @dave-kok. Pero funciona solo si todo el contenido se adapta sin desplazamiento. Aprecio si alguien va a mejorar.

outer {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
.space {
float: right;
height: 75%;
}
.floateable {
width: 40%;
height: 25%;
float: right;
clear: right;
}

Aquí está el código http://jsfiddle.net/d9t9joh2/

Answer 2

Aquí está mi solución:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}
.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}
</style>
<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>
<div class="footer">
<div class="bottom-element">bottom-element-in-sidebar</div>
</div>

Answer 3

Coloque el div en otro div y establezca el estilo del div padre en position:relative; Luego, en el div hijo, establezca las siguientes propiedades de CSS: position:absolute; bottom:0; position:absolute; bottom:0;

Answer 4

Con la introducción de Flexbox , esto se ha vuelto bastante fácil sin mucha piratería. align-self: flex-end en el elemento hijo lo alineará a lo largo del cross-axis .

.container {
display: flex;
}
.bottom {
align-self: flex-end;
}

<div class="container">
<div class="bottom">Bottom of the container</div>
</div>

Salida:

.container {
display: flex;
/* Material design shadow */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
height: 100px;
width: 175px;
padding: 10px;
background: #fff;
font-family: Roboto;
}
.bottom {
align-self: flex-end;
}

<div class="container">
<div class="bottom">Bottom of the container</div>
</div>

Answer 5

Conseguí que esto funcionara en el primer intento al agregar position:absolute; bottom:0; position:absolute; bottom:0; al ID div dentro del CSS. No agregué la position:relative; estilo padre position:relative; .

Funciona perfectamente tanto en Firefox como en IE 8, aún no lo he probado en IE 7.

Answer 6

Después de luchar con varias técnicas durante un par de días, debo decir que esto parece ser imposible. Incluso usar javascript (que no quiero hacer) no parece posible.

Para aclarar para aquellos que no lo hayan entendido, esto es lo que estoy buscando: al publicarlo es bastante común diseñar un recuadro (imagen, tabla, figura, etc.) de modo que su parte inferior se alinee con la parte inferior del último línea de texto de un bloque (o página) con texto que fluye alrededor del recuadro de manera natural arriba y hacia la derecha o hacia la izquierda, según en qué lado de la página se encuentre el recuadro. En html / css es trivial utilizar el estilo flotante para alinear la parte superior de una inserción con la parte superior de un bloque, pero para mi sorpresa, parece imposible alinear la parte inferior del texto y la inserción a pesar de que es una tarea de diseño común .

Supongo que tendré que revisar los objetivos de diseño para este artículo a menos que alguien tenga una sugerencia de último minuto.

Answer 7

Esto ahora es posible con flex box. Simplemente configure la ''pantalla'' de la división principal como ''flex'' y configure la propiedad ''margin-top'' en ''auto''. Esto no distorsiona ninguna propiedad tanto del div.

.parent {
display: flex;
height: 100px;
border: solid 1px #0f0f0f;
}
.child {
margin-top: auto;
border: solid 1px #000;
width: 40px;
word-break: break-all;
}

<div class=" parent">
<div class="child">I am at the bottom!</div>
</div>

Answer 8

Esto coloca un div fijo en la parte inferior de la página y se corrige en la parte inferior a medida que se desplaza hacia abajo

#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}

Answer 9

He logrado esto en JQuery al colocar un elemento de puntal de ancho cero sobre el flotador a la derecha, luego dimensionar el puntal (o tubo) de acuerdo con la altura del padre menos la altura del niño flotada.

Antes de que Js comience, estoy usando el enfoque de posición absoluta, que funciona pero permite que el texto fluya detrás. Por lo tanto, cambio a la posición estática para habilitar el enfoque de puntal (el encabezado es el elemento padre, el recorte es el que quiero abajo a la derecha y el tubo es mi puntal)

$("header .pipe").each(function(){
$(this).next(".cutout").css("position","static");
$(this).height($(this).parent().height()-$(this).next(".cutout").height());
});

CSS

header{
position: relative;
}
header img.cutout{
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
header .pipe{
width:0px;
float:right
}

La tubería debe venir primero, luego el recorte, luego el texto en el orden HTML.

Answer 10

La respuesta de Stu es la más cercana a trabajar hasta ahora, pero aún no tiene en cuenta el hecho de que la altura de la división externa puede cambiar, según la forma en que el texto se ajusta dentro de ella. Por lo tanto, reposicionar la división interna (cambiando la altura del "tubo") solo una vez no será suficiente. Ese cambio debe ocurrir dentro de un bucle, para que pueda verificar continuamente si ha logrado el posicionamiento correcto y reajustarlo si es necesario.

El CSS de la respuesta anterior sigue siendo perfectamente válido:

#outer {
position: relative;
}
#inner {
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
.pipe {
width:0px;
float:right
}

Sin embargo, el Javascript debería verse más como esto:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {
// Prevent endless loop
i++;
if (i > 5000) { break; }
totalHeight = jQuery(''#outer'').outerHeight();
innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
if (innerBottom < totalHeight) {
if (hadToReduce !== true) {
jQuery(".pipe").css(''height'', '''' + (jQuery(".pipe").height() + 1) + ''px'');
} else { break; }
} else if (innerBottom > totalHeight) {
jQuery(".pipe").css(''height'', '''' + (jQuery(".pipe").height() - 1) + ''px'');
hadToReduce = true;
} else { break; }
}

Answer 11

No estoy seguro, pero un escenario publicado anteriormente parecía funcionar si usas posición: relativo en lugar de absoluto en el div hijo.

#parent {
width: 780px;
height: 250px;
background: yellow;
border: solid 2px red;
}
#child {
position: relative;
height: 50px;
width: 780px;
top: 100%;
margin-top: -50px;
background: blue;
border: solid 2px green;
}

<div id="parent">
This has some text in it.
<div id="child">
This is just some text to show at the bottom of the page
</div>
</div>

Y no hay mesas ...!

Answer 12

Para poner cualquier elemento en la parte inferior de su contenedor, simplemente use esto:

div {
position: absolute;
bottom: 0px;
}

Answer 13

Pregunta bastante antigua, pero aún así ... Puedes hacer flotar un div en la parte inferior de la página así:

div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}

Puedes ver donde ocurre la magia. Creo que podrías hacer lo mismo para flotarlo al fondo de un div padre.

Answer 14

Probé este escenario publicado anteriormente también;

div {
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}

El posicionamiento absoluto fija el div en la parte más baja del navegador al cargar la página, pero cuando se desplaza hacia abajo si la página es más larga, no se desplaza con usted. Cambié el posicionamiento para ser relativo y funciona perfecto. El div se dirige directamente a la parte inferior durante la carga, por lo que no lo verá hasta que llegue a la parte inferior.

div {
position: relative;
height:100px; /* Or the height of your image */
top: 100%;
margin-top: -100px;
}

Answer 15

Probé varias de estas técnicas, y las siguientes funcionaron para mí, así que si todo lo demás aquí, si todo lo demás falla, intente esto porque funcionó para mí :).

<style>
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
bottom:-10;
}
</style>
<div id="footer" >Sportkin - the registry for sport</div>

Answer 16

Puedes intentar usar un elemento vacío con un ancho de 1px y flotarlo. Luego borre el elemento que realmente desea colocar y use la altura del elemento vacío para controlar qué tan abajo va.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

Answer 17

Sé que es un hilo muy viejo pero todavía me gustaría responder. Si alguien sigue los siguientes css y html, entonces funciona. El pie de página del niño div se pegará con el fondo como pegamento.

<style>
#MainDiv
{
height: 300px;
width: 300px;
background-color: Red;
position: relative;
}
#footerDiv
{
height: 50px;
width: 300px;
background-color: green;
float: right;
position: absolute;
bottom: 0px;
}
</style>
<div id="MainDiv">
<div id="footerDiv">
</div>
</div>

Answer 18

Sé que esto es viejo, pero recientemente me encontré con este problema.

usar el consejo de divisiones de posición absoluta es realmente tonto, porque toda la cosa flotante pierde puntos con posiciones absolutas.

ahora, no encontré una solución universal, pero en muchos casos propuse usar divs flotantes solo para mostrar algo en una fila, como una serie de elementos de expansión. y no se puede alinear verticalmente eso.

para lograr un efecto similar puede hacer esto: no haga que el div flote, sino que establezca su propiedad de visualización en inline-block . entonces puedes alinearlo verticalmente como te plazca. solo tiene que establecer la propiedad div de los padres vertical-align en la top , bottom , middle o de baseline

Espero que ayude a alguien

Answer 19

Si desea que el texto se ajuste bien: -

.outer {
display: table;
}
.inner {
height: 200px;
display: table-cell;
vertical-align: bottom;
}
/* Just for styling */
.inner {
background: #eee;
padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
<div class="inner">
<h3>Sample Heading</h3>
<p>Sample Paragragh</p>
</div>
</div>

Answer 20

Si estás de acuerdo con que solo la línea inferior del texto va hacia el lado del bloque (a diferencia de estar completamente alrededor y debajo de él, lo que no puedes hacer sin terminar el bloque y comenzar uno nuevo), es no es imposible hacer flotar un bloque a una de las esquinas inferiores de un bloque principal. Si coloca algo de contenido en una etiqueta de párrafo dentro de un bloque y desea flotar un enlace a la esquina inferior derecha del bloque, coloque el enlace dentro del bloque de párrafo y configúrelo para que flote: a la derecha, luego coloque una etiqueta div con claro : ambos se establecen justo debajo del final de la etiqueta de párrafo. El último div es asegurarse de que la etiqueta principal rodee las etiquetas flotadas.

<div class="article" style="display: block;">
<h3>title</h3>
<p>
text content
<a href="#" style="display: block;float: right;">Read More</a>
</p>
<div style="clear: both;"></div>
</div>

Answer 21

Si establece el elemento padre como posición: relativo, puede establecer el elemento secundario en la posición de configuración inferior: absoluto; y abajo: 0;

#outer {
width:10em;
height:10em;
background-color:blue;
position:relative;
}
#inner {
position:absolute;
bottom:0;
background-color:white;
}

<div id="outer">
<div id="inner">
<h1>done</h1>
</div>
</div>

Answer 22

Si necesita una alineación relativa y los DIV aún no le dan lo que desea, solo use tablas y establezca valign = "bottom" en la celda donde desea que el contenido se alinee con la parte inferior. Sé que no es una buena respuesta a tu pregunta, ya que se supone que los DIV reemplazan las tablas, pero esto es lo que tuve que hacer recientemente con un título de imagen y ha funcionado perfectamente hasta el momento.

Answer 23

Un enfoque interesante es apilar un par de elementos flotantes a la derecha uno encima del otro.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

El único problema es que esto solo funciona cuando se conoce la altura de la caja.

Answer 24

Una forma de hacerlo funcionar es la siguiente:

• Flota tus elementos a la izquierda como de costumbre.

• Gire el div padre 180 grados usando

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle: http://jsfiddle.net/wcneY/

• Ahora rote todos los elementos que flotan a la izquierda (déles una clase) 180 grados para volver a colocarlos en línea recta. Voila! Flotan hasta el fondo.

Answer 25

Una respuesta alternativa es el uso juicioso de tablas y filas. Al configurar todas las celdas de la tabla en la línea anterior (excepto la del contenido principal) para rowpan = "2", siempre obtendrá un agujero de una celda en la parte inferior de la celda de la tabla principal que siempre puede poner valign = "bottom".

También puede establecer su altura como el mínimo que necesita para una línea. Por lo tanto, siempre obtendrá su línea de texto favorita en la parte inferior, independientemente del espacio que ocupe el resto del texto.

Probé todas las respuestas div, no pude hacer que hicieran lo que necesitaba.

<table>
<tr>
<td valign="top">
this is just some random text
<br> that should be a couple of lines long and
<br> is at the top of where we need the bottom tag line
</td>
<td rowspan="2">
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
is really<br/>
tall
</td>
</tr>
<tr>
<td valign="bottom">
now this is the tagline we need on the bottom
</td>
</tr>
</table>

Answer 26

Yo solo haría una mesa.

<div class="elastic">
<div class="elastic_col valign-bottom">
bottom-aligned content.
</div>
</div>

Y el CSS:

.elastic {
display: table;
}
.elastic_col {
display: table-cell;
}
.valign-bottom {
vertical-align: bottom;
}

Véalo en acción:
http://jsfiddle.net/mLphM/1/

Answer 27

Yo también había encontrado esta solución durante mucho tiempo. Esto es lo que obtengo:

align-self: flex-end;

enlace: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Sin embargo, no recuerdo de dónde abrí este enlace. Espero eso ayude

Answer 28

simple ...... en el archivo html a la derecha .... tenga el "pie de página" (o el div que desea en la parte inferior) en la parte inferior. Así que no hagas esto:

<div id="container">
<div id="Header"></div>
<div id="Footer"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
</div>

HAGA ESTO: (tenga el pie de página debajo)

<div id="container">
<div id="Header"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
<div id="Footer"></div>
</div>

Después de hacer esto, puede ir al archivo css y hacer que la "barra lateral" flote hacia la izquierda. luego haga que el "contenido" flote hacia la derecha, luego haga que "pie de página" borre ambos.

que debería funcionar.did para mí.

Answer 29

Establezca el div padre en position: relative , luego el div interno en ...

position: absolute;
bottom: 0;

... y hay que ir :)