¿Cómo alinear el contenido de un div a la parte inferior
https://stackoverflow.com/questions/585945
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Decir que tengo el siguiente código CSS y HTML:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
La sección de cabecera se fija la altura, pero el contenido de la cabecera puede cambiar.
Me gustaría que el contenido de la cabecera de estar alineados verticalmente a la parte inferior de la sección de cabeza, por lo que la última línea de texto "palos" a la parte inferior de la sección de encabezado.
Así que si hay sólo una línea de texto, que sería como:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
Y si había tres líneas:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
¿Cómo se puede hacer esto en el CSS?
Solución
Relativa + posicionamiento absoluto es la mejor opción:
#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>
Sin embargo, es posible que encuentre problemas con eso. Cuando lo probé tuve problemas con menús desplegables que aparecen a continuación el contenido. Es que no es bonita.
Sinceramente, para cuestiones de centrado y verticales, de altura así, cualquier problema de alineación vertical con los artículos no son fijos, es más fácil simplemente usar las tablas.
Otros consejos
Uso posicionamiento 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 señaló , es necesario identificar la cabecera de contenido para hacer este trabajo.
<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>
Yo uso estas propiedades y funciona!
#header {
display: table-cell;
vertical-align: bottom;
}
Si no está preocupado por navegadores antiguos utilizar un FlexBox.
El elemento padre necesita su tipo de pantalla establecido para flexionar
div.parent {
display: flex;
height: 100%;
}
A continuación, se establece align-yo del elemento secundario para flexionar-fin.
span.child {
display: inline-block;
align-self: flex-end;
}
Aquí está el recurso utilicé para aprender: http://css-tricks.com/snippets/css/a-guide-to-flexbox /
Después de luchar con este mismo problema desde hace algún tiempo, finalmente me di cuenta de una solución que cumple con todos mis requisitos:
- No requiere que sé la altura del contenedor.
- diferencia de las soluciones absolutos relativa +, el contenido no flotan en su propia capa (es decir, que incorpora normalmente en el div contenedor).
- funciona en todos los navegadores (Internet Explorer 8 +).
- fácil de implementar.
La solución sólo se necesita una <div>, lo que yo llamo el "alineador":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
Este truco funciona mediante la creación de un div alto y delgado, que empuja la línea de base de texto a la parte inferior del recipiente.
Este es un ejemplo completo que logra lo que el PO estaba pidiendo. He hecho el "bottom_aligner" de espesor y rojo con fines de demostración solamente.
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>
La forma moderna de hacerlo sería utilizar FlexBox . Véase el siguiente ejemplo. Ni siquiera necesita para envolver Some text... en ninguna etiqueta HTML, ya que el texto que figura directamente en un recipiente flexible está envuelto en un elemento de la flexión en el anonimato.
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>
Si sólo hay un poco de texto y desea alinear verticalmente hasta el fondo del 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;
Los elementos en línea o en línea de bloques se pueden alinear a la parte inferior de elementos de bloque si la línea de la altura del elemento padre / bloque es mayor que la del elemento de línea. *
marcado:
<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;
}
* asegurarse de que está en el modo de estándares
Usted puede simplemente alcanzado 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>
Si tiene varios artículos, altura dinámica, utiliza los valores de indicación CSS de mesa y table-cell:
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;
}
He creado una demo JSBin aquí: http://jsbin.com/INOnAkuF/2/edit
La demo también tiene un ejemplo de cómo align usando la misma técnica verticalmente central.
Esta es la forma flexy para hacerlo. Por supuesto, no es apoyada por IE8, ya que el usuario necesita hace 7 años. Dependiendo de lo que necesita para apoyar, algunos de estos pueden ser eliminados.
Sin embargo, sería bueno si había una manera de hacer esto sin un contenedor exterior, apenas tiene el texto se alinee dentro de su propio auto.
#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;
}
una solución muy simple, de una sola línea, es añadir la línea de heigth a la div, teniendo en cuenta que todo el texto de la div irá abajo.
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>
tenga en cuenta que esta es una solución práctica y rápida cuando lo que desea texto dentro div a ir hacia abajo, si es necesario combinar imágenes y esas cosas, que tendrá que codificar un poco más complejo y sensible CSS
No es necesario absoluta + relativo para esto. Es muy posible el uso de posición relativa tanto para contenedor y los datos. Esta es la forma de hacerlo.
Supongamos altura de sus datos va a ser x. Su envase es relativo y el pie también es relativo. Todo lo que tiene que hacer es añadir a los datos
bottom: -webkit-calc(-100% + x);
Sus datos estarán siempre en la parte inferior de su contenedor. Funciona incluso si tiene contenedor con altura dinámica.
HTML será como este
<div class="container">
<div class="data"></div>
</div>
CSS será así
.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 esto ayude.
Aquí hay otra solución utilizando FlexBox pero sin utilizar flex-end para la alineación inferior. La idea es establecer margin-bottom en h1 Auto para empujar el contenido restante de la parte inferior:
#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>
También podemos hacer lo mismo con margin-top:auto en el texto pero en este caso tenemos que envuelve dentro de un div o 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>
si se pudiera establecer la altura de la div envoltura del contenido (# encabezado de contenido como se muestra en la respuesta del otro), en lugar de toda la #header, tal vez usted también puede intentar este enfoque:
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: Estoy en la parte inferior
CSS:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
He encontrado esta solución basada en un defecto Bootstrap iniciar plantilla
/* 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 estas respuestas y ninguno trabajaron para mí ... No soy un experto FlexBox, pero esto fue razonablemente fácil de averiguar, es simple y fácil de entender y utilizar. Para separar algo del resto del contenido, insertar un div vacío y se deja crecer para llenar el espacio.
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 reacciona como se espera cuando el contenido de la parte inferior no es fijo dimensionado también cuando el recipiente no está fijado de tamaño.
He ideado una manera que es mucho más simple de lo que se ha mencionado.
Ajuste la altura de la div de cabecera. A continuación, dentro de eso, el estilo de su etiqueta H1 de la siguiente manera:
float: left;
padding: 90px 10px 11px
Estoy trabajando en un sitio para un cliente, y el diseño requiere que el texto a estar en el fondo de una cierta div. He logrado el resultado utilizando estas dos líneas, y funciona bien. Además, si el texto se expande, el relleno se sigue siendo el mismo.
tratar con:
div.myclass { margin-top: 100%; }
trate de cambiar el% de solucionarlo. Ejemplo:. 120% o 90% ... etc
El sitio que acabo de hacer para un cliente solicitó que el texto del pie era una caja alta, con el texto en la parte inferior que he conseguido con esta sencilla relleno, debe trabajar para todos los navegadores.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
Un ejemplo perfecto entre navegadores es probable que éste aquí:
http://www.csszengarden.com/?cssfile=/ 213 / 213.css & page = 0
La idea es a la vez para mostrar el div en la parte inferior y también haciendo que se pegue allí. A menudo, el enfoque simple hará que el div pegajosa de desplazamiento hacia arriba con el contenido principal.
siguiente es un ejemplo mínimo completamente de trabajo. Tenga en cuenta que no hay div incrustación de engaño requerido. Las muchas reservas de biosfera son sólo para forzar una barra de desplazamiento a 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>
Si usted se está preguntando su código no podría estar trabajando en IE, recuerde agregar la etiqueta DOCTYPE en la parte superior. Es crucial para que esto funcione en IE. Además, esta debe ser la primera etiqueta y nada debería aparecer por encima de ella.
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;
}
menos hace que la resolución de puzzles CSS mucho más parecido a la codificación que como ... Me encanta CSS. Es un verdadero placer cuando se puede cambiar todo el diseño (sin romperlo :) simplemente cambiando un parámetro.
2015 solución
<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
su bienvenida
