¿Cómo consigo que un div flote hasta el fondo de su contenedor?

He flotante imágenes y recuadros en la parte superior de un contenedor usando flotante: derecha (o izquierda) muchas veces. Recientemente tuve la necesidad de 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 a pesar de que float no tiene un valor de fondo, pero no he podido hacerlo usando una serie de técnicas y la búsqueda en la web no ha tenido más que usar posicionamiento absoluto, pero esto no dar el comportamiento correcto 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 odiaría tener que hacerlo en cada página que lo necesite.

EDITAR: Solo una nota para cualquiera que venga aquí. La pregunta vinculada anteriormente como un duplicado, de hecho, no es un duplicado. El requisito de que el texto se ajuste alrededor del elemento insertado lo hace completamente diferente. De hecho, la respuesta a la respuesta más votada aquí deja en 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 a este problema, pero algunas de las soluciones publicadas aquí y en la pregunta vinculada pueden funcionar para casos específicos.

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

position: absolute; 
bottom: 0;

... y ahí lo tienes :)

Una forma de hacerlo funcionar es la siguiente:

• Flota tus elementos a la izquierda como normal

• 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 gire todos los elementos que flotan hacia la izquierda (deles una clase) 180 grados para volver a colocarlos en línea recta. Voila! flotan hasta el fondo.

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

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

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

He logrado esto en JQuery colocando un elemento de puntal de ancho cero encima del flotador a la derecha, luego dimensionando el puntal (o tubería) de acuerdo con la altura del padre menos la altura del niño flotante.

Antes de que js entre en acción, 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 permitir el enfoque del puntal. (el encabezado es el elemento padre, el recorte es el que quiero abajo a la derecha, y la tubería 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.

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

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

Coloque el div en otro div y establezca el estilo del div primario en position:relative;Luego, en el div secundario, configure las siguientes propiedades CSS:position:absolute; bottom:0;

Si está de acuerdo con que solo la línea inferior del texto vaya al lado del bloque (en lugar de estar completamente alrededor y debajo, lo que no puede hacer sin terminar el bloque y comenzar uno nuevo), es No es imposible hacer flotar un bloque en 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 hacer flotar un enlace en la esquina inferior derecha del bloque, coloque el enlace dentro del bloque de párrafo y configúrelo como flotante: a la derecha, luego coloque una etiqueta div con clear : ambos se encuentran justo debajo del final de la etiqueta de párrafo. El último div es asegurarse de que la etiqueta principal rodea las etiquetas flotantes.

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

Si establece el elemento principal como posición: relativa, puede establecer el elemento secundario en la posición de configuración inferior: absoluta; 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>
  

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>

Sé que estas cosas son viejas, pero recientemente me encontré con este problema.

usar divs de posición absoluta consejos de es realmente tonto, porque todo el flotador pierde el punto con las posiciones absolutas

ahora, no encontré una solución universal, pero en muchos casos prople usa divs flotantes solo para mostrar algo en una fila, como una serie de elementos span. y no puedes alinearlo verticalmente.

para lograr un efecto similar, puede hacer esto: no haga que el div flote, sino que configure su propiedad de visualización en inline-block. entonces puedes alinearlo verticalmente como te plazca. sólo tiene que propiedad div conjunto de los padres vertical-aligno bien top, bottom, middleobaseline

Espero que ayude a alguien

Con la introducción de Flexbox , esto se ha vuelto bastante fácil sin mucho hackeo. align-self: flex-enden el elemento hijo lo alineará a lo largo del eje transversal .

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

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

autoalinear: extremo flexible;

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

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/

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>

A eligió este enfoque de @ dave-kok. Pero solo funciona si todo el contenido se adapta sin desplazamiento. Agradezco si alguien 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/

Esto ahora es posible con flex box. Simplemente configure la 'visualización' de la división principal como 'flex' y configure la propiedad 'margin-top' en 'auto'. Esto no distorsiona ninguna propiedad de ambos 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>

No estoy seguro, pero un escenario publicado anteriormente parece funcionar si usa position: relative en lugar de absoluto en el elemento secundario div.

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

Si necesita una alineación relativa y los DIV aún no le dan lo que desea, simplemente 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 gran respuesta a su pregunta, ya que se supone que los DIV deben reemplazar las tablas, pero esto es lo que tuve que hacer recientemente con un título de imagen y hasta ahora ha funcionado perfectamente.

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 que sea relativo y funciona perfecto. El div va directo al fondo después de la carga, por lo que no lo verá hasta que llegue al fondo.

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

Un enfoque interesante es apilar un par de elementos flotantes derechos 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 conoce la altura de la caja.

La respuesta de Stu es lo más parecido a trabajar hasta ahora, pero aún no tiene en cuenta el hecho de que la altura de su div externo puede cambiar, según la forma en que el texto se ajusta dentro de él. Por lo tanto, reposicionar el div interno (cambiando la altura de la "tubería") solo una vez no será suficiente. Ese cambio tiene que ocurrir dentro de un bucle, por lo que puede verificar continuamente si ya 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 así:

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

Sé que es un hilo muy antiguo, pero aún así me gustaría responder. Si alguien sigue el siguiente CSS y HTML, entonces funciona. El div de pie de página infantil 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>

Usar la margin-toppropiedad css con el propósito de establecer el pie de página en la parte inferior de su contenedor. Y usar la text-align-lastpropiedad css para establecer el contenido del pie de página en el centro.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Oh, jóvenes ... Aquí están:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

¡Ninguna posición absoluta! ¡Sensible! Vieja escuela

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

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

Puedes ver dónde sucede la magia. Creo que podría hacer lo mismo para flotarlo al fondo de un div padre.

simple ...... en el archivo html a la derecha ... tiene 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 a la izquierda. luego haga que el "contenido" flote a la derecha y luego el "pie de página" borre ambos.

eso debería funcionar para mí.

Obtuve esto para trabajar en el primer intento agregando position:absolute; bottom:0;a la ID div dentro del CSS. No agregué el estilo principal position:relative;.

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

Una respuesta alternativa es el uso juicioso de tablas y filas. configurando todas las celdas de la tabla en la línea anterior (excepto la de contenido principal) para que sean rowpan = "2" siempre obtendrá un agujero de 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 de cuánto espacio ocupe el resto del texto.

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

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>

Puede 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 lejos va.

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

.invisible {
float: left;  
}

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