Como alinhar o conteúdo de uma div para o fundo
https://stackoverflow.com/questions/585945
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Say Eu tenho o seguinte código CSS e HTML:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
A seção de cabeçalho é fixo altura, mas o conteúdo do cabeçalho pode mudar.
Gostaria que o conteúdo do cabeçalho para ser alinhado verticalmente na parte inferior da seção de cabeçalho, por isso, a última linha do texto "paus" para a parte inferior da seção de cabeçalho.
Portanto, se houver apenas uma linha de texto, que seria como:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
E se havia três linhas:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Como isso pode ser feito em CSS?
Solução
Relativa + posicionamento absoluto é a sua melhor aposta:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}<div id="header">
<h1>Title</h1>
<div id="header-content">Some content</div>
</div>
Mas você pode ter problemas com isso. Quando eu tentei Eu tive problemas com menus suspensos que aparecem abaixo do conteúdo. Não é apenas bonita.
Honestamente, por questões de centralização verticais e, altura bem, quaisquer problemas de alinhamento vertical com os itens não são fixas, é mais fácil apenas para tabelas de uso.
Exemplo: Você pode fazer este layout HTML sem usar tabelas ?
Outras dicas
Use o posicionamento CSS:
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
Como cletus observou , você precisa identificar o conteúdo do cabeçalho para fazer este trabalho.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
Eu uso essas propriedades e funciona!
#header {
display: table-cell;
vertical-align: bottom;
}
Se você não está preocupado com navegadores antigos usar um flexbox.
O elemento pai precisa seu conjunto tipo de exibição para o Flex
div.parent {
display: flex;
height: 100%;
}
Em seguida, você define alinhar-auto do elemento filho para flex-final.
span.child {
display: inline-block;
align-self: flex-end;
}
Aqui está o recurso que eu usei para aprender: http://css-tricks.com/snippets/css/a-guide-to-flexbox /
Depois de lutar com esse mesmo problema há algum tempo, eu finalmente descobri uma solução que atenda todos os meus requisitos:
- não exige que eu sei a altura do recipiente.
- Ao contrário das soluções absolutos relativos +, o conteúdo não flutua na sua própria camada (isto é, ele incorpora normalmente no recipiente div).
- funciona em navegadores (IE8 +).
- simples de implementar.
A solução só tem um <div>, que eu chamo de "alinhador":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
Este truque funciona através da criação, um div alto e magro, que empurra a linha de base de texto para o fundo do recipiente.
Aqui está um exemplo completo que atinge o que o OP estava pedindo. Eu fiz o "bottom_aligner" de espessura e vermelho para fins de demonstração somente.
CSS:
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML:
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
A maneira moderna de fazer isso seria usar flexbox . Veja o exemplo abaixo. Você não precisa mesmo para embrulhar Some text... em qualquer tag HTML, uma vez que o texto diretamente contida em um recipiente flexível é envolto em um item Flex anônimo.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>
Se houver apenas algum texto e você deseja alinhar verticalmente para o fundo do recipiente.
section {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
align-items: flex-end; /* bottom of the box */
}<section>Some text aligns to the bottom</section>
display: flex;
align-items: flex-end;
in-line ou inline-bloco elementos pode ser alinhado com a parte inferior dos elementos de nível de bloco se a linha-altura do elemento pai / bloco é maior do que a do elemento interno. *
marcação:
<h1 class="alignBtm"><span>I'm at the bottom</span></h1>
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
* verifique se você está no modo de padrões
Você pode simplesmente alcançado Flex
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>
Se você tiver vários, itens de altura dinâmicos, use os valores de exibição CSS de mesa e-célula da tabela:
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
Eu criei uma demonstração JSBin aqui: http://jsbin.com/INOnAkuF/2/edit
A demonstração também tem um exemplo de como a alinhar verticalmente centro usando a mesma técnica.
Aqui está a maneira flexy para fazê-lo. Claro, não é suportado pelo IE8, como o usuário precisava de 7 anos atrás. Dependendo do que você precisa de apoio, alguns destes pode ser feito com a distância.
Ainda assim, seria bom se houvesse uma maneira de fazer isso sem um recipiente externo, só tem o próprio texto alinhe dentro de seu próprio self.
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
uma solução muito simples, uma linha, é adicionar linha-ALTURA ao div, tendo em vista que o texto todo da div vai fundo.
CSS:
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML:
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
ter em mente que esta é uma solução prática e rápida quando quiser apenas texto dentro de div para ir para baixo, se você precisa combinar imagens e outras coisas, você terá de código um pouco mais CSS complexo e sensível
Você não precisa absoluta + relativo para isso. É muito possível usando posição relativa para ambos recipiente e dados. Isto é como você fazê-lo.
Suponha altura de seus dados vai ser x. O recipiente é relativo e rodapé também é relativa. Tudo que você tem a fazer é adicionar aos seus dados
bottom: -webkit-calc(-100% + x);
Seus dados estarão sempre no fundo de seu recipiente. Funciona mesmo se você tiver recipiente com altura dinâmica.
HTML será como este
<div class="container">
<div class="data"></div>
</div>
CSS será como este
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Espero que isso ajude.
Aqui é uma outra solução usando flexbox mas sem usar margin-bottom em h1 para auto para empurrar o conteúdo restante para o fundo:
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>
Nós também podemos fazer o mesmo com margin-top:auto sobre o texto, mas neste caso é preciso envolvê-la dentro de um div ou span:
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header span {
margin-top:auto;
}<div id="header">
<h1>Header title</h1>
<span>Header content (one or multiple lines)</span>
</div>
Se você pode definir a altura da div embalagem do conteúdo (# header-conteúdo como demonstrado em outros de resposta), em vez de toda a #header, talvez você também pode tentar essa abordagem:
HTML
<div id="header">
<h1>some title</h1>
<div id="header-content">
<span>
first line of header text<br>
second line of header text<br>
third, last line of header text
</span>
</div>
</div>
CSS
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
parece estar funcionando:
HTML: Eu estou na parte inferior
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
Eu encontrei esta solução baseada em um padrão de bootstrap iniciar template
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
Todas essas respostas e nenhum funcionou para mim ... Eu não sou nenhum expert flexbox, mas esta foi razoavelmente fácil de descobrir, é simples e fácil de entender e usar. Para algo separado do resto do conteúdo, inserir uma div vazia e deixá-lo crescer para preencher o espaço.
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
Este reage como esperado quando o conteúdo de fundo não é fixo dimensionado também quando o recipiente não é fixo tamanho.
Eu criaram uma maneira que é muito mais simples do que o que foi mencionado.
Definir a altura da div de cabeçalho. Então, dentro disso, seu estilo de tag H1 da seguinte forma:
float: left;
padding: 90px 10px 11px
Eu estou trabalhando em um site para um cliente, e o projeto exige que o texto seja na parte inferior de um determinado div. Eu tenho conseguido o resultado usando estas duas linhas, e ele funciona bem. Além disso, se o texto se expande, o preenchimento será ainda permanecem os mesmos.
tentativa com:
div.myclass { margin-top: 100%; }
tente alterar o% para corrigi-lo. Exemplo:. 120% ou 90%, etc ...
O site eu só fiz para um cliente solicitou que o texto de rodapé era uma caixa alta, com o texto na parte inferior eu consegui isso com simples preenchimento, deve funcionar para todos os navegadores.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
Um exemplo perfeito cross-browser é provavelmente esta aqui:
http://www.csszengarden.com/?cssfile=/ 213 / 213.css & page = 0
A idéia é tanto para exibir o div na parte inferior e também torná-lo ficar lá. Muitas vezes, a abordagem simples fará com que o sticky div de rolagem para cima com o conteúdo principal.
A seguir é um exemplo mínimo em pleno funcionamento. Note-se que não há nenhum truque div incorporar necessário. Os muitos BRs são apenas para forçar uma barra de rolagem para aparecer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#floater {
background: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="floater"></div>
</body>
</html>
Se você está se perguntando o seu código pode não estar funcionando no IE, lembre-se de adicionar a tag DOCTYPE no topo. É crucial para que isso funcione no IE. Além disso, esta deve ser a primeira tag e nada deve aparecer acima dela.
parece estar funcionando:
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
Usando marcas menos resolver enigmas CSS muito mais como codificação do que como ... Eu só amor CSS. É um verdadeiro prazer quando você pode mudar todo o layout (sem quebrá-lo :) apenas alterando um parâmetro.
2015 solução
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
seu bem-vindos
