Como posso posicionar minha div na parte inferior do contêiner?

741

Dado o seguinte HTML:

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

Eu gostaria de me #copyrightater ao fundo #container.

Posso conseguir isso sem usar posicionamento absoluto? Se a propriedade float suportasse um valor 'bottom', parece que isso funcionaria, mas infelizmente não.

html css Dónal
fonte
211
Essa situação é um dos motivos pelos quais as tabelas de layout ainda não foram embora. Fazer isso com uma tabela é simples e funciona em qualquer lugar. Fazer isso em CSS é hilariamente difícil e o suporte entre navegadores é mais ou menos. Muito menos que é impossível lembrar como fazê-lo corretamente.
286 Tomalak
Eu não entendo a pergunta. Por que você precisa usar o posicionamento absoluto? O contêiner tem uma altura definida, independentemente do conteúdo que ele contém?
precisa saber é o seguinte

Respostas:

924

Provavelmente não.

Atribuir position:relativea #container, e depois position:absolute; bottom:0;para #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 snippet

Do utilizador
fonte
11
Se a posição: relativa em seu contêiner quebrar seu design, lembre-se de que você pode incluir apenas uma div de wrapper dentro do contêiner com 100% de altura e, em vez disso, adicionar posição: relativa a isso.
21811 Jack Shepherd
e se for para repetir elementos, que de outra forma seriam posicionados um sobre o outro?
CRice
6
Um elemento absolutamente posicionado busca o parente mais próximo que é absoluto ou relativamente posicionado para determinar sua posição. Se tudo falhar, recorre ao corpo (janela). Portanto, daí a necessidade de os pais serem relativos.
user17753
1
adicione uma margem inferior ao #container para impedir os direitos autorais sobre o conteúdo da página
Doc Kodam
1
A abordagem do Flexbox abaixo é muito melhor.
woohoo
345

Na verdade, a resposta aceita pelo @User só funcionará se a janela for alta e o conteúdo for curto. Mas se o conteúdo for alto e a janela curta, ele colocará as informações de direitos autorais sobre o conteúdo da página e, em seguida, role para baixo para ver o conteúdo e deixar um aviso de direitos autorais flutuante. Isso torna essa solução inútil para a maioria das páginas (como essa página, na verdade).

A maneira mais comum de fazer isso é a abordagem "CSS sticky footer" demonstrada ou uma variação um pouco menor. Essa abordagem funciona muito bem - se você tiver um rodapé de altura fixa.

Se você precisar de um rodapé de altura variável que aparecerá na parte inferior da janela se o conteúdo for muito curto e na parte inferior do conteúdo se a janela for muito curta, o que você fará?

Engula seu orgulho e use uma mesa.

Por exemplo:

* {
    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 snippet

Experimente. Isso funcionará para qualquer tamanho de janela, para qualquer quantidade de conteúdo, para qualquer tamanho de rodapé, em todos os navegadores ... até no IE6.

Se você se encanta com o pensamento de usar uma tabela para o layout, reserve um segundo para se perguntar por quê. O CSS deveria facilitar nossa vida - e isso tem sido geral - mas o fato é que, mesmo depois de todos esses anos, ainda é uma bagunça quebrada e contra-intuitiva. Não pode resolver todos os problemas. Está incompleto.

As tabelas não são legais, mas pelo menos por enquanto, às vezes são a melhor maneira de resolver um problema de design.

Rick Reilly
fonte
80
Parece a melhor resposta para mim. Além disso, você sempre pode usar "tabelas css" (display: table [-row / -cell]) em vez de tabelas html. Isso fornece o mesmo layout sem a semântica.
chiccodoro
1
Se você possui um script PHP / outro script que gera sua página, pode duplicar seu rodapé, usando um como um "espaçador" oculto e um posicionado absolutamente. O rodapé espaçador garante que, independentemente do conteúdo que você tenha no rodapé, ele não suba a página.
Tyzoid
20
Para outros que estão lendo esses comentários: isso não tem nada a ver com "orgulho" ou ser "legal". Usar tabelas para o layout é pragmaticamente ainda mais doloroso, especialmente para grandes quantidades de conteúdo. Garantir que você não perca um td e analisar tantas marcações irrelevantes ao adicionar conteúdo é um inferno. É uma pena porque estamos criando documentos HTML , não apenas layouts, e se a maior parte do conteúdo de nosso documento não é de dados tabulares, por que o colocamos em tabelas? Se não gostamos de usar as tecnologias da Web do jeito que elas foram feitas, por que usá-las? Use desktop / aplicativos móveis para publicar conteúdo em vez
gabe
1
@chiccodoro eu implementei uma mesa-menos equivalente, que é surpreendentemente reduzido, verifique a minha resposta abaixo
Hashbrown
59
Orgulho é irrelevante. As tabelas não devem ser usadas para o layout, devido a razões de acessibilidade. Se você já usou um leitor de tela, saberá por que as tabelas devem ser usadas apenas para dados tabulares. Use tabelas css como estados @chiccodoro.
quer
171

A abordagem flexbox!

Nos navegadores suportados , você pode usar o seguinte:

Exemplo Aqui

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

Mostrar snippet de código

A solução acima é provavelmente mais flexível, no entanto, aqui está uma solução alternativa:

Exemplo Aqui

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

Mostrar snippet de código

Como uma observação lateral, convém adicionar prefixos de fornecedor para suporte adicional.

Josh Crozier
fonte
3
e quanto column-reverseaos pais, para que você não precise adicionar nada à criança?
Max Waterman
1
Provavelmente essa deve ser a resposta aceita - sem hacks, sem posicionamento absoluto, o estouro funciona corretamente quando necessário (era para mim).
Adverbly 27/02
114

Sim, você pode fazer isso sem absoluteposicionar e sem usar tables (que estraga com marcação e tal).

DEMO
Foi testado para funcionar no IE> 7, chrome, FF e é uma coisa muito fácil de adicionar ao layout 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;
}

Ele efetivamente faz o que float:bottomfaria, mesmo levando em consideração o problema apontado na resposta de @Rick Reilly!

Hashbrown
fonte
1
Agradável! Apenas uma observação, IIRC, você precisa do <!DOCTYPE>conjunto para que isso funcione no IE (<= 8 pelo menos); essas versões mais antigas são compatíveis apenas display:table-XXXno modo "padrões". Mas o modo de padrões também quebrará muitas páginas projetadas para, por exemplo, o IE6.
David
3
Você também pode usar flexbox - stackoverflow.com/questions/526035/...
Josh Crozier
2
Encontrei mais sorte com .foot{display: table-footer-group}. Eu não precisava vertical-align, heightou border-collapse.
precisa
Isso funcionaria se #containercontivesse #foote sem outro conteúdo?
Solace
parece que seria, pelo menos, a necessidade de um espaço sem quebras , @Solace
Hashbrown
20

É uma pergunta antiga, mas essa é uma abordagem única que pode ajudar em vários casos.

CSS puro, sem posicionamento absoluto, sem correção de altura, navegador cruzado (IE9 +)

confira que Working Fiddle

Como o fluxo normal é "de cima para baixo", não podemos simplesmente pedir ao #copyrightdiv que fique no fundo de seus pais sem absolutamente nenhum tipo de posicionamento, mas se quisermos o#copyright div fique na parte superior de seu pai, será muito simples - porque esse é o caminho normal do fluxo.

Então, vamos usar isso em nossa vantagem. vamos mudar a ordem dos divs no HTML, agora o#copyright div está no topo e o conteúdo segue imediatamente. também fazemos com que a divisão de conteúdo se estenda até o fim (usando pseudo elementos e técnicas de limpeza)

agora é apenas uma questão de inverter a ordem de volta à exibição. isso pode ser feito facilmente com a transformação CSS.

Giramos o contêiner em 180deg e agora: de cima para baixo. (e invertemos o conteúdo para parecer normal novamente)

Se queremos ter uma barra de ferramentas dentro da área de conteúdo, precisamos aplicar um pouco mais da mágica do CSS. como pode ser mostrado aqui [nesse exemplo, o conteúdo está abaixo de um cabeçalho - mas é a mesma ideia]

* {
  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 snippet

avrahamcool
fonte
2
Por favor, não, veja como a renderização é horrível agora i.stack.imgur.com/ZP9Hw.png
grg
7

Crie outro contêiner divpara os elementos acima #copyright. Logo acima dos direitos autorais, adicione um novo div: <div style="clear:both;"></div> Isso forçará o rodapé a ficar embaixo de todo o resto, como no caso de usar o posicionamento relativo ( bottom:0px;).

Rápli András
fonte
7

Tente isso;

<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
fonte
1
@Feelsbadman Por favor, não altere o código de outras pessoas em respostas como essa. Se você pretendia apenas separar o CSS do HTML, observe que alterou inadvertidamente o código para outra coisa, possivelmente invalorizando a resposta e certamente alterando a intenção do pôster.
precisa saber é o seguinte
6

Embora nenhuma das respostas fornecidas aqui parecesse se aplicar ou funcionar no meu caso específico, deparei-me com este artigo que fornece esta solução interessante:

#container {
  display: table;
}

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

Acho muito útil para aplicar o design responsivo para exibição em dispositivos móveis sem precisar reordenar todo o código html de um site, definindo body se como uma tabela.

Observe que apenas o primeiro table-footer-groupou table-header-groupserá renderizado como tal: se houver mais de um, os outros serão renderizados como table-row-group.

Skippy le Grand Gourou
fonte
6

Grade CSS

Como o uso da CSS Grid está aumentando, eu gostaria de sugerir align-selfo elemento que está dentro de um contêiner de grade.

align-selfpode conter qualquer um dos valores: end, self-end, flex-endpor exemplo, o seguinte.

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

Manoj Kumar
fonte
5

Na verdade, você pode alignir para a caixa bottomsem usar position:absolutese souber heighto #containeruso do recurso de alinhamento de texto deinline-block elementos.

Aqui você pode vê-lo em ação.

Este é o 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
fonte
5

Usando a propriedade translateY e top

Basta definir o elemento filho para position: relativo e movê-lo para cima: 100% (que é a altura de 100% do pai) e ficar na parte inferior do pai por transformação: translateY (-100%) (que é -100% da altura de pai a criança).

Benefícios

  • você não pega o elemento do fluxo da página
  • é dinâmico

Mas ainda assim solução alternativa :(

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

Não se esqueça dos prefixos do navegador mais antigo.

Samuell
fonte
4

Link do CodePen aqui .

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 snippet

azizarslan
fonte
3

Se você deseja que "grude" no fundo, independentemente da altura do contêiner, o posicionamento absoluto é o caminho a seguir. Obviamente, se o elemento copyright for o último no contêiner, ele sempre estará na parte inferior de qualquer maneira.

Você pode expandir sua pergunta? Explique exatamente o que você está tentando fazer (e por que você não deseja usar o posicionamento absoluto)?

Jack Sleight
fonte
2

Além disso, se houver estipulações sobre o uso de position:absolute;ou position:relative;, você sempre pode tentar padding pai div ou colocar a margin-top:x;. Na maioria dos casos, não é um método muito bom, mas pode ser útil em alguns casos.

Eco Fantasma
fonte
1

Talvez isso ajude alguém: você sempre pode colocar a div fora da outra div e empurrá-la para cima usando a margem negativa:

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

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

Anmol Ratan Mohla
fonte
1

Não quero usar "position: absolute" para rodapé pegajoso na parte inferior. Então você pode fazer desta maneira:

 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 snippet

nilesh pawar
fonte
Oi nilesh; essa solução já é fornecida em várias respostas. Leia todas as respostas existentes para uma pergunta antes de fornecer uma nova, para garantir que não haja duplicação de conteúdo!
TylerH
1

Se você não souber a altura do bloqueio filho:

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

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

Se você conhece a altura do bloco filho, adicione o bloco filho e adicione 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 snippet

zloctb
fonte
0

Só porque isso não foi mencionado, o que geralmente funciona bem em situações como a sua:

Colocando o copyright-div após o container-div

Você só precisa formatar a divisão de direitos autorais de maneira semelhante ao outro contêiner (mesma largura geral, centralização etc.), e tudo está bem.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

O único momento em que isso pode não ser o ideal é quando seu container-div é declarado height:100%e o usuário precisa rolar para baixo para ver os direitos autorais. Mas mesmo assim você pode solucionar o problema (por exemplo, margin-top:-20pxquando a altura do seu elemento de direitos autorais é de 20 px).

  • Sem posicionamento absoluto
  • Sem layout de tabela
  • Sem CSS louco, que parece diferente em todos os outros navegadores (pelo menos no IE, você sabe)
  • Formatação simples e clara

Além disso: eu sei que o OP pediu uma solução que "... grude no fundo da div 'container' ..." , e não algo embaixo dele, mas vamos lá, as pessoas estão procurando boas soluções aqui, e isso é um!

Levita
fonte
No caso do OP, esta solução só é bom se #copyright é de altura fixa (então você pode definir margin-top: -{element height}.
Gajus
@ Gajus: Este não é um posicionamento absoluto nem fixo. Isso faz exatamente o que o OP deseja (não importa a altura dos direitos autorais), com a única exceção de que a divisão dos direitos autorais não está no primeiro contêiner. O OP pediu que os direitos autorais colassem no fundo do contêiner, não na página !!
Levite
Desculpe, não quero dizer se o contêiner do # container tiver altura fixa.
Gajus 17/01
A menos que eu esteja enganado, o problema real que o OP está tentando resolver é a parte inferior do elemento quando a altura do elemento é ditada por outro elemento, por exemplo, com comentários jsbin.com/acoVevI/3 . Aqui você não pode simplesmente colocar o botão fora do contêiner . Para ilustrar melhor o problema, consulte jsbin.com/acoVevI/4 .
Gajus
O OP disse: "Gostaria que os direitos autorais fiquem no fundo do contêiner". Portanto, isso não está totalmente claro nesta questão. Além disso, este é um exemplo válido para qualquer caso em que simplesmente "fique na parte inferior do #container". Esta solução deve ser útil, tem uma abordagem limpa e funciona bem para muitos layouts. Por exemplo, qualquer página com rolagem de conteúdo, como stackoverflow.com ;-)
levita
0

Aqui está uma abordagem destinada a fazer um elemento com altura e largura conhecidas (pelo menos aproximadamente) flutuar para a direita e permanecer na parte inferior, enquanto se comporta como um elemento embutido nos outros elementos. O foco é no canto inferior direito, porque você pode colocá-lo facilmente em qualquer outro canto através de outros métodos.

Eu precisava criar uma barra de navegação que tivesse os links reais no canto inferior direito e elementos irmãos aleatórios, garantindo que a própria barra esticasse corretamente, sem interromper o layout. Usei um elemento "shadow" para ocupar o espaço dos links da barra de navegação e o adicionei no final dos nós filhos do contêiner.

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

Não há nada chamado float:bottomem CSS. A melhor maneira é usar o posicionamento nesses casos:

position:absolute;
bottom:0;
Touhid Rahman
fonte
Por favor, explique sua resposta.
Mohit Raj Purohit
0

Para aqueles que têm apenas um filho no contêiner, você pode usar a abordagem table-celle vertical-alignque funcionou de maneira confiável para posicionar uma única div na parte inferior do pai.

Observe que o uso table-footer-groupcomo outras respostas mencionadas interromperá o cálculo da altura dos pais 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 snippet

Hai Zhang
fonte
0

De acordo: w3schools.com

Um elemento com posição: absoluto; é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em relação à janela de visualização, como fixo).

Portanto, você precisa posicionar o elemento pai com algo relativo ou absoluto, etc, e posicionar o elemento desejado como absoluto e, posteriormente, definir como 0.

Jonas Freire
fonte
Isso já é mencionado na resposta aceita (entre outros).
TylerH
-1

Div de estilo, position:absolute;bottom:5px;width:100%;está funcionando, mas exigia mais situação de rolagem.

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