Comment aligner le contenu d'un div pour le bas?
dis que j'ai le code CSS et HTML suivant:
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
la section d'en-tête a une hauteur fixe, mais le contenu de l'en-tête peut changer. J'aimerais que le contenu de l'en-tête soit aligné verticalement au bas de la section d'en-tête, de sorte que la dernière ligne de texte "colle" au bas de la section d'en-tête.
donc s'il n'y a qu'une ligne de texte, ce serait comme:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
Et s'il y avait trois lignes:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
comment cela peut-il être fait dans CSS?
24 réponses
par rapport+positionnement absolu est votre meilleur pari:
#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>
mais vous pourriez rencontrer des problèmes avec cela. Lorsque je l'ai essayé, j'ai eu des problèmes avec les menus déroulants apparaissant sous le contenu. C'est juste pas assez.
honnêtement, pour les questions de centrage vertical et, bien, tous les problèmes d'alignement vertical avec les éléments ne sont pas la hauteur fixe, il est plus facile juste d'utiliser des tables.
Exemple: pouvez-vous faire cette mise en page HTML sans utiliser de tables?
utiliser le positionnement 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;
}
Comme cletus , a noté, vous devez identifier l'en-tête de contenu pour faire ce travail.
<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>
j'utilise ces propriétés et il fonctionne!
#header {
display: table-cell;
vertical-align: bottom;
}
si vous n'êtes pas inquiet au sujet des navigateurs traditionnels, utilisez un flexbox.
l'élément parent doit avoir son type d'affichage réglé sur flex
div.parent {
display: flex;
height: 100%;
}
ensuite, vous définissez l'élément enfant align-self à flex-end.
span.child {
display: inline-block;
align-self: flex-end;
}
Voici la ressource que j'ai utilisée pour apprendre: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
après avoir lutté avec ce même problème pendant un certain temps, j'ai finalement trouvé une solution qui répond à toutes mes exigences:
- N'exige pas que je sais que le conteneur de hauteur.
- Contrairement aux solutions relatives + absolues, le contenu ne flotte pas dans sa propre couche (c'est-à-dire qu'il s'incorpore normalement dans le conteneur div).
- fonctionne à travers les navigateurs (IE8+).
- Simple à mettre en œuvre.
la solution ne prend qu'un <div>
, que j'appelle "l'aligneur":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
cette astuce fonctionne en créant une div grande, mince, qui pousse la ligne de base du texte au fond du conteneur.
voici un exemple complet qui réalise ce que l'OP demandait. J'ai fait l' "bottom_aligner" épais et rouge uniquement à des fins de démonstration.
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>
les éléments Inline ou inline-bloc peuvent être alignés avec le bas des éléments de niveau bloc si la ligne-hauteur de l'élément parent/bloc est supérieure à celle de l'élément inline.*
balisage:
<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;
}
*assurez-vous que vous êtes en mode standard
la façon moderne de le faire serait d'utiliser flexbox . Voir l'exemple ci-dessous. Vous n'avez même pas besoin d'envelopper Some text...
dans une étiquette HTML, puisque le texte directement contenu dans un conteneur flex est enveloppé dans un article flex anonyme.
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>
S'il n'y a qu'un texte et que vous voulez vous aligner verticalement au bas du conteneur.
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>
si vous avez plusieurs éléments de hauteur dynamique, utilisez les valeurs d'affichage CSS de la table et de la table-cellule:
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;
}
j'ai créé une démo de JSBin ici: http://jsbin.com/INOnAkuF/2/edit
la démo a aussi un exemple comment centrer verticalement l'alignement en utilisant la même technique.
vous n'avez pas besoin d'absolu+relatif pour cela. Il est tout à fait possible d'utiliser la position relative pour les conteneurs et les données. C'est la façon dont vous le faites.
supposons que la hauteur de vos données va être x
. Votre conteneur est relatif et le pied de page est également relatif. Tout ce que vous avez à faire est d'ajouter à vos données
bottom: -webkit-calc(-100% + x);
Vos données seront toujours au fond de votre récipient. Fonctionne même si vous avez conteneur avec hauteur dynamique.
HTML sera comme ceci
<div class="container">
<div class="data"></div>
</div>
CSS sera comme ceci
.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);
}
Espérons que cette aide.
Voici la façon flexible de le faire. Bien sûr, il n'est pas supporté par IE8, comme l'utilisateur avait besoin il y a 7 ans. Selon ce que vous avez besoin de soutenir, certains d'entre eux peuvent être éliminés.
pourtant, ce serait bien s'il y avait un moyen de le faire sans un conteneur extérieur, juste avoir le texte aligné lui-même.
#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;
}
, Vous pouvez simplement réalisé 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>
je sais que c'est vieux de plus de 2 ans, mais j'ai conçu une façon qui est beaucoup plus simple que ce qui a été mentionné.
définit la hauteur de l'en-tête div. Ensuite, à l'intérieur de cela, style votre étiquette H1 comme suit:
float: left;
padding: 90px 10px 11px
je travaille sur un site pour un client, et la conception exige que le texte soit au fond d'une certaine div. J'ai atteint le résultat en utilisant ces deux lignes et ça marche très bien. Aussi, si le texte ne s'élargir, le remplissage sera restent toujours les mêmes.
si vous pouviez définir la hauteur de la div d'enrubannage du contenu (#en-tête-contenu comme indiqué dans la réponse de l'autre), au lieu de l'en-tête # entier, peut-être que vous pouvez aussi essayer cette approche:
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;
}
semble fonctionner:
HTML: Je suis en bas
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
j'ai trouvé cette solution basée sur un modèle de démarrage bootstrap par défaut
/* 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>
Voici une autre solution utilisant flexbox mais sans utiliser flex-end pour l'alignement du fond. L'idée est de mettre margin-bottom
sur h1 à auto pour pousser le contenu restant au fond:
#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>
nous pouvons faire la même chose avec margin-top:auto
sur le texte mais dans ce cas nous devons l'envelopper dans un 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>
une solution très simple, en une seule ligne, est d'ajouter ligne-heigth à la div, en ayant à l'esprit que tout le texte de la div va descendre en bas.
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>
gardez à l'esprit que c'est une solution pratique et rapide quand vous voulez juste le texte à l'intérieur de div descendre, si vous avez besoin de combiner des images et des trucs, vous aurez à coder un peu plus complexe et responsive CSS
essayez avec:
div.myclass { margin-top: 100%; }
essayez de changer le % pour le corriger. Exemple: 120% ou 90%...etc.
un exemple parfait de navigateur croisé est probablement celui-ci:
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
l'idée est à la fois d'afficher le div en bas et de le faire coller là. Souvent, l'approche simple fera défiler le Sticky div vers le haut avec le contenu principal.
ci-dessous est un exemple de fonctionnement minimal. Notez qu'il n'y a pas de supercherie de div embedding requis. Les nombreux BRs sont juste pour forcer une barre de défilement à apparaître:
<!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 vous vous demandez si votre code ne fonctionne pas sur IE, n'oubliez pas d'ajouter la balise DOCTYPE en haut. Il est crucial pour cela de travailler sur IE. En outre, cela devrait être la première étiquette et rien ne devrait apparaître au-dessus.
le site que je viens de faire pour un client a demandé que le texte du pied de page était une boîte haute, avec le texte en bas de page je l'ai réalisé avec du rembourrage simple, devrait fonctionner pour tous les navigateurs.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
semble fonctionner:
#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;
}
en utilisant moins rend la résolution des puzzles CSS beaucoup plus comme le codage que comme... J'adore le CSS. C'est un vrai plaisir quand vous pouvez changer la mise en page entière (sans la casser :) juste en changeant un paramètre.
2015 solution
<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
votre accueil