Comment aligner le contenu d'un div au fond
https://stackoverflow.com/questions/585945
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Dire que j'ai le CSS et le code 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 est fixe la hauteur, mais le contenu d'en-tête peut changer.
Je voudrais que le contenu de l'en-tête à être alignés verticalement vers le bas de la section d'en-tête, de sorte que la dernière ligne de texte « sticks » au fond de la section d'en-tête.
Donc, s'il n'y a qu'une seule 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 en CSS?
La solution
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 pouvez rencontrer des problèmes avec cela. Quand je l'ai essayé j'avais des problèmes avec des menus déroulants qui apparaissent ci-dessous le contenu. Il est tout simplement pas assez.
Honnêtement, pour les problèmes de centrage vertical et, bien, les problèmes d'alignement vertical avec les éléments ne sont pas fixes hauteur, il est plus facile de utiliser les tables.
Exemple: Pouvez-vous faire cette mise en page HTML sans utiliser des tables
Autres conseils
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;
}
Cletus a noté , vous avez besoin d'identifier l'en-tête du 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 sur les navigateurs existants utiliser un FlexBox.
L'élément parent a besoin de son type d'affichage mis à fléchir
div.parent {
display: flex;
height: 100%;
}
Ensuite, vous définissez align-auto de l'élément enfant à la fin de fléchir.
span.child {
display: inline-block;
align-self: flex-end;
}
Voici la ressource que je l'habitude d'apprendre: http://css-tricks.com/snippets/css/a-guide-to-flexbox /
Après avoir lutté avec le même problème pendant un certain temps, je me suis finalement trouvé une solution qui répond à tous mes besoins:
- Ne nécessite pas que je connais la hauteur du conteneur.
- Contrairement à des solutions absolues par rapport à +, le contenu ne flotte pas dans sa propre couche (à savoir, il intègre normalement dans le conteneur div).
- Travaux sur les navigateurs (IE8 +).
- simple à mettre en œuvre.
La solution prend juste un <div>, que j'appelle la "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 un div grand, maigre, qui pousse la ligne de base de texte au fond du récipient.
Voici un exemple complet qui permet d'atteindre ce que l'OP demandait. Je l'ai fait le « bottom_aligner » épais et rouge à 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>
La façon moderne de le faire serait d'utiliser FlexBox . Voir l'exemple ci-dessous. Vous ne même pas besoin d'envelopper Some text... dans une balise HTML, puisque le texte directement contenu dans un récipient flexible est enveloppé dans un élément flexible 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 que du texte et que vous souhaitez aligner verticalement au fond du récipient.
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;
éléments en ligne ou en ligne-bloc peuvent être alignés vers le bas d'éléments de type bloc si la ligne-hauteur de l'élément parent / bloc est supérieure à celle de l'élément de ligne. *
balise:
<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
Vous pouvez simplement atteindre 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 vous avez plusieurs éléments, de hauteur dynamique, utilisez les valeurs d'affichage CSS de table et 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;
}
J'ai créé ici une démo JSBin: http://jsbin.com/INOnAkuF/2/edit
La démo a également un exemple comment aligner Centrer verticalement en utilisant la même technique.
Voici la façon flexy de le faire. Bien sûr, ce n'est pas pris en charge par IE8, comme l'utilisateur nécessaire il y a 7 ans. En fonction de ce que vous devez soutenir, certains d'entre eux peuvent être abolies.
Pourtant, ce serait bien s'il y avait un moyen de le faire sans un récipient extérieur, juste avoir le texte lui-même aligner au sein de son propre soi.
#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;
}
une très simple, solution d'une ligne, est d'ajouter la ligne au-heigth div, ayant à l'esprit que tout le texte de la div sera 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>
garder à l'esprit que c'est une solution pratique et rapide quand vous voulez juste texte à l'intérieur div pour aller vers le bas, si vous avez besoin de combiner des images et des choses, vous devrez coder un peu plus CSS complexe et réactif
Vous n'avez pas besoin absolu + relatif pour cela. Il est très possible en utilisant la position relative pour les conteneurs et les données. Voici comment vous le faites.
On suppose la hauteur de vos données va être x. Votre conteneur est relatif et pied de page est également relative. Tout ce que vous devez 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 à 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 cela aide.
Voici une autre solution en utilisant FlexBox mais sans utiliser flex-end pour l'alignement du bas. 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>
On peut aussi faire la même chose avec margin-top:auto sur le texte, mais dans ce cas, nous avons besoin de 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>
si vous pouvez régler la hauteur de la div d'emballage du contenu (#header contenu comme indiqué dans la réponse de l'autre), au lieu de l'ensemble #header, vous pouvez peut-être 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 travailler:
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 défaut d'amorçage démarrage 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>
Toutes ces réponses et aucun travaillé pour moi ... Je ne suis pas expert en FlexBox, mais cela était relativement facile à comprendre, il est simple et facile à comprendre et à utiliser. Pour séparer quelque chose du reste du contenu, insérez un vide div et le laisser grandir pour remplir l'espace.
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>
Celui-ci réagit comme prévu lorsque le contenu de fond ne sont pas de taille fixe également lorsque le conteneur est pas de taille fixe.
Je l'ai trouvé un moyen qui est beaucoup plus simple que ce qui a été mentionné.
Régler la hauteur de la div d'en-tête. Ensuite, à l'intérieur que le style de votre tag 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 bas d'un certain div. J'ai réalisé le résultat en utilisant ces deux lignes, et il fonctionne très bien. En outre, si le texte ne se dilate, le rembourrage restera toujours le même.
essayer avec:
div.myclass { margin-top: 100%; }
essayez de changer le% pour le fixer. Exemple:. 120% ou de 90%, etc ...
Le site que je viens de faire pour un client a demandé que le texte de pied de page était une boîte haute, avec le texte au fond j'ai réalisé ce avec un 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;
}
Un exemple cross-browser parfait est sans doute celui-ci ici:
http://www.csszengarden.com/?cssfile=/ 213 / 213.css & page = 0
L'idée est à la fois pour afficher la div en bas et aussi ce qui en fait tenir là. Souvent, l'approche simple fera le collant défilement div avec le contenu principal.
Voici un exemple minimal de travail pleinement. Notez qu'il n'y a pas de tricherie intégration div nécessaire. 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 votre code pourrait ne pas travailler sur IE, souvenez-vous d'ajouter la balise DOCTYPE en haut. Il est crucial pour que cela fonctionne sur IE. En outre, cela devrait être la première balise et rien ne doit apparaître au-dessus.
Semble travailler:
#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;
}
Utilisation moins rend la résolution des puzzles CSS beaucoup plus comme le codage que comme ... J'adore CSS. Il est un vrai plaisir quand vous pouvez changer la mise en page entière (sans le casser :) en changeant un paramètre.
solution 2015
<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
