Como faço para que uma div flutue até o fundo do contêiner?

Flutuei imagens e caixas de inserção na parte superior de um contêiner usando float: direita (ou esquerda) várias vezes. Recentemente, atendi à necessidade de flutuar uma div no canto inferior direito de outra div com a quebra de texto normal que você obtém com a flutuação (texto quebrado acima e somente à esquerda).

Eu pensei que isso deveria ser relativamente fácil, mesmo que o float não tenha valor inferior, mas não fui capaz de fazê-lo usando várias técnicas e pesquisar na Web não apresentou nada além de usar posicionamento absoluto, mas isso não acontece forneça o comportamento de quebra de linha correto.

Eu pensei que este seria um design muito comum, mas aparentemente não é. Se ninguém tiver uma sugestão, terei que dividir meu texto em caixas separadas e alinhar a div manualmente, mas isso é bastante precário e eu odiaria fazê-lo em todas as páginas que precisarem.

EDIT: Apenas uma nota para quem vem aqui. A questão vinculada acima como duplicada não é de fato uma duplicata. A exigência de que o texto envolva o elemento inserido o torna completamente diferente. De fato, a resposta à resposta mais votada aqui deixa claro por que a resposta na pergunta vinculada está errada como resposta a essa pergunta. De qualquer forma, ainda não parece haver uma solução geral para esse problema, mas algumas das soluções postadas aqui e na pergunta vinculada podem funcionar em casos específicos.

Defina a div principal como position: relative, então a div interna como ...

position: absolute; 
bottom: 0;

... e lá vai você :)

Uma maneira de fazê-lo funcionar é o seguinte:

• Flutue seus elementos para a esquerda normalmente

• Gire a div principal 180 graus 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/

• Agora gire todos os elementos que flutuam para a esquerda (dê uma aula) 180 graus para colocá-los retos novamente. Voila! eles flutuam para o fundo.

Depois de lutar com várias técnicas por alguns dias, devo dizer que isso parece impossível. Mesmo usando javascript (o que eu não quero fazer) não parece possível.

Para esclarecer para aqueles que podem não ter entendido - é isso que estou procurando: na publicação, é bastante comum fazer o layout de uma inserção (figura, tabela, figura etc.), de modo que seus pontos finais fiquem alinhados com os últimos linha de texto de um bloco (ou página) com o texto fluindo ao redor da inserção de maneira natural acima e para a direita ou esquerda, dependendo do lado da página em que está inserida. Em html / css, é trivial usar o estilo float para alinhar a parte superior de uma inserção com a parte superior de um bloco, mas, para minha surpresa, parece impossível alinhar a parte inferior do texto e inserir, apesar de ser uma tarefa de layout comum .

Acho que terei que revisar as metas de design desse item, a menos que alguém tenha uma sugestão de última hora.

Eu consegui isso no JQuery colocando um elemento de suporte de largura zero acima do flutuador à direita e dimensionando o suporte (ou tubo) de acordo com a altura dos pais menos a altura da criança flutuada.

Antes de o js começar, estou usando a abordagem de posição absoluta, que funciona, mas permite que o texto flua para trás. Portanto, mudo para a posição estática para permitir a abordagem do suporte. (cabeçalho é o elemento pai, recorte é o que eu quero no canto inferior direito e pipe é meu suporte)

$("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

}

O canal deve vir primeiro, depois o recorte e o texto na ordem HTML.

Isso coloca uma div fixa na parte inferior da página e fixa na parte inferior à medida que você rola para baixo

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

Coloque a div em outra div e defina o estilo da div pai como position:relative;Then no div filho, defina as seguintes propriedades CSS:position:absolute; bottom:0;

Se você estiver bem com apenas a linha inferior do texto indo para o lado do bloco (em vez de ficar completamente ao redor e embaixo dele, o que você não pode fazer sem terminar o bloco e iniciar um novo), é não é impossível flutuar um bloco para um dos cantos inferiores de um bloco pai. Se você colocar algum conteúdo em uma tag de parágrafo dentro de um bloco e quiser flutuar um link no canto inferior direito do bloco, coloque o link dentro do bloco de parágrafo e defina-o como float: right, em seguida, coloque uma tag div com clear : ambos definidos logo abaixo do final da tag de parágrafo. A última div é garantir que a tag pai rodeie as tags flutuantes.

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

Se você definir o elemento pai como posição: relativa, poderá definir o filho para a posição de configuração inferior: absoluta; e inferior: 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>
  

Se você deseja que o texto seja organizado de forma adequada: -

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

Eu sei que esse material é antigo, mas recentemente me deparei com esse problema.

use conselhos de divs de posição absoluta é realmente bobo, porque a coisa flutuante inteira perde ponto com posições absolutas.

agora, não encontrei uma solução universal, mas em muitos casos o prople usa divs flutuantes apenas para exibir algo em sequência, como uma série de elementos de amplitude. e você não pode alinhar verticalmente isso.

para obter um efeito semelhante, você pode fazer o seguinte: não faça a div flutuar, mas defina sua propriedade display como inline-block. então você pode alinhá-lo verticalmente, como quiser. você só precisa propriedade div conjunto dos pais vertical-align, quer top, bottom, middleoubaseline

espero que ajude alguém

Com a introdução do Flexbox , isso se tornou bastante fácil sem muitos hackers. align-self: flex-endno elemento filho o alinhará ao longo do eixo transversal .

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

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

Resultado:

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

Eu já encontrava essa solução há muito tempo. Isto é o que eu recebo:

alinhar-se: flex-end;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ No entanto, não me lembro de onde abri este link. Espero que ajude

Eu apenas faria uma mesa.

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

E o CSS:

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

Veja em ação:
http://jsfiddle.net/mLphM/1/

Eu tentei várias dessas técnicas, e o seguinte funcionou para mim; portanto, se tudo mais aqui, se tudo mais falhar, tente isso porque funcionou para mim :).

<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 escolheu esta abordagem do @ dave-kok. Mas funciona apenas se todo o conteúdo for adequado sem rolagem. Eu aprecio se alguém vai melhorar

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

Aqui está o código http://jsfiddle.net/d9t9joh2/

Agora isso é possível com a caixa flexível. Basta definir a 'exibição' da div pai como 'flex' e definir a propriedade 'margin-top' como 'auto'. Isso não distorce nenhuma propriedade da 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>

Não tenho certeza, mas um cenário postado anteriormente parecia funcionar se você usasse a posição: relativa em vez de absoluta na div filho.

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

E sem mesas ...!

Se você precisar de um alinhamento relativo e as DIVs ainda não fornecerem o que você deseja, basta usar tabelas e definir valign = "bottom" na célula em que você deseja que o conteúdo seja alinhado ao final. Sei que não é uma ótima resposta para sua pergunta, já que as DIVs devem substituir as tabelas, mas foi o que tive que fazer recentemente com uma legenda de imagem e funcionou perfeitamente até agora.

Eu tentei esse cenário postado anteriormente também;

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

O posicionamento absoluto fixa a div na parte mais baixa do navegador ao carregar a página, mas quando você rola para baixo, se a página for mais longa, ela não rola com você. Mudei o posicionamento para ser relativo e funciona perfeitamente. O div vai direto para o fundo após o carregamento, para que você não o veja até chegar ao fundo.

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

Uma abordagem interessante é empilhar alguns elementos de flutuação corretos uns sobre os outros.

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

O único problema é que isso só funciona quando você conhece a altura da caixa.

A resposta de Stu chega mais perto de funcionar até agora, mas ainda não leva em consideração o fato de que a altura de sua div externa pode mudar, com base na maneira como o texto é inserido nela. Portanto, reposicionar a div interna (alterando a altura do "pipe") apenas uma vez não será suficiente. Essa alteração deve ocorrer dentro de um loop, para que você possa verificar continuamente se já obteve o posicionamento correto e reajustar, se necessário.

O CSS da resposta anterior ainda é perfeitamente válido:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

No entanto, o Javascript deve se parecer mais com isso:

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

Eu sei que é um tópico muito antigo, mas ainda gostaria de responder. Se alguém seguir o css e html abaixo, ele funcionará. A div do rodapé filho ficará com o fundo como cola.

<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 a margin-toppropriedade css com o objetivo de definir rodapé na parte inferior de seu contêiner. E usar a text-align-lastpropriedade css para definir o conteúdo do rodapé no centro.

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

Oh, jovens ... Aqui está você:

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

Nenhuma posição absoluta! Responsivo! Moda antiga

Pergunta bastante antiga, mas ainda assim ... Você pode flutuar uma div na parte inferior da página desta maneira:

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

Você pode ver onde a mágica acontece. Eu acho que você poderia fazer o mesmo flutuando para o fundo de uma div pai.

simples ...... no arquivo html à direita .... coloque o "rodapé" (ou a div que você deseja na parte inferior) na parte inferior. Então não faça isso:

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

Faça o seguinte: (coloque o rodapé embaixo.)

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

Depois de fazer isso, você pode acessar o arquivo css e fazer com que a "barra lateral" flutue para a esquerda. depois, o "conteúdo" flutua para a direita e o "rodapé" limpa ambos.

isso deve funcionar. fez para mim.

Consegui que isso funcionasse na primeira tentativa, adicionando position:absolute; bottom:0;ao ID da div dentro do CSS. Eu não adicionei o estilo pai position:relative;.

Está funcionando perfeitamente no Firefox e no IE 8, ainda não o testou no IE 7.

uma resposta alternativa é o uso criterioso de tabelas e linhas. definindo todas as células da tabela na linha anterior (exceto a principal) para row (linha) = "2", você sempre terá um orifício de uma célula na parte inferior da célula da tabela principal e sempre poderá colocar valign = "bottom".

Você também pode definir sua altura para o mínimo necessário para uma linha. Assim, você sempre terá sua linha de texto favorita na parte inferior, independentemente de quanto espaço o restante do texto ocupe.

Eu tentei todas as respostas div, não consegui fazê-las fazer o que eu precisava.

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

aqui está a minha solução:

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

Você pode tentar usar um elemento vazio com uma largura de 1px e flutuá-lo. Em seguida, limpe o elemento que você deseja posicionar e use a altura do elemento vazio para controlar o quão baixo ele vai.

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

.invisible {
float: left;  
}

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