Come per allineare il contenuto di un div al fondo
https://stackoverflow.com/questions/585945
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Dire che ho il seguente codice CSS e HTML:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
La sezione di intestazione è fissato altezza, ma il contenuto di intestazione può cambiare.
desidero il contenuto dell'intestazione essere allineati verticalmente sul fondo della sezione di intestazione, così l'ultima riga di testo "bastoncini" al fondo della sezione di intestazione.
Quindi, se v'è una sola riga di testo, sarebbe come:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
E se ci fossero tre linee:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
Come si può fare in CSS?
Soluzione
relativo + posizionamento assoluto è la soluzione migliore:
#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>
Ma si può incorrere in problemi con questo. Quando ho provato ho avuto problemi con i menu a discesa che appaiono sotto il contenuto. E 'solo che non abbastanza.
Onestamente, per le questioni di centraggio verticali e, altezza bene, eventuali problemi di allineamento verticale con le voci non sono fissi, è più facile da usare solo le tabelle.
Esempio: Si può fare questo layout HTML senza usare le tabelle ?
Altri suggerimenti
posizionamento Usa 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 ha osservato , è necessario individuare l'intestazione-contenuti per fare questo lavoro.
<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>
Io uso queste proprietà e funziona!
#header {
display: table-cell;
vertical-align: bottom;
}
Se non siete preoccupati per i browser legacy utilizzare un FlexBox.
L'elemento genitore deve il suo tipo di visualizzazione impostato su flex
div.parent {
display: flex;
height: 100%;
}
Poi si imposta align-sé del elemento figlio di flettere-end.
span.child {
display: inline-block;
align-self: flex-end;
}
Ecco la risorsa che ho usato per imparare: http://css-tricks.com/snippets/css/a-guide-to-flexbox /
Dopo aver lottato con questo stesso problema per qualche tempo, ho finalmente capito una soluzione che soddisfa tutte le mie esigenze:
- Non richiede che so l'altezza del contenitore.
- A differenza delle soluzioni assolute relativa +, il contenuto non galleggia nel proprio strato (cioè incorpora normalmente nel div contenitore).
- Opere tutti i browser (IE8 +).
- semplice da implementare.
La soluzione vuole solo un <div>, che io chiamo il "allineatore":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
HTML
<div class="bottom_aligner"></div>
... Your content here ...
Questo trucco funziona con la creazione di un uomo alto, magro div, che spinge la linea di base del testo alla parte inferiore del contenitore.
Ecco un esempio completo che realizza ciò che il PO stava chiedendo. Ho fatto il "bottom_aligner" di spessore e rosso solo a scopo dimostrativo.
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>
Il modo più moderno per farlo sarebbe utilizzando FlexBox . Vedere l'esempio di seguito. Non hai nemmeno bisogno di avvolgere Some text... in qualsiasi tag HTML, dal momento che il testo direttamente contenuto in un contenitore flessibile è avvolto in una voce anonima 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 v'è solo una parte di testo e si desidera allineare verticalmente verso il fondo del contenitore.
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 linea o inline-block elementi possono essere allineati alla parte inferiore di elementi livello blocco se la linea-altezza dell'elemento genitore / blocco è superiore a quello dell'elemento in linea. *
markup:
<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;
}
* assicurarsi che siete in modalità standard
Si può semplicemente raggiunto flessione
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 si dispone di più elementi di altezza dinamici,, utilizzare i valori visualizzati CSS di tavolo e 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;
}
Ho creato una demo JSBin qui: http://jsbin.com/INOnAkuF/2/edit
Il demo ha anche un esempio di come allineare utilizzando la stessa tecnica verticale centrale.
Ecco il modo Flexy per farlo. Naturalmente, non è supportato da IE8, come l'utente aveva bisogno di 7 anni fa. A seconda di ciò che è necessario per sostenere, alcuni di questi può essere fatto via con.
Ancora, sarebbe bello se ci fosse un modo per fare questo senza un contenitore esterno, basta avere il testo stesso allineare all'interno di esso il proprio sé.
#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 molto semplice, soluzione one-line, è di aggiungere la linea-altezza al div, avendo in mente che tutto il testo del div andrà in basso.
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>
di tenere presente che questa è una soluzione pratica e veloce quando si desidera solo il testo all'interno di div a scendere, se avete bisogno di combinare immagini e cose, si dovrà codificare un po 'più complesso e sensibile CSS
Non hai bisogno assoluto + relativo per questo. E 'molto possibile sfruttare la posizione relativa sia contenitore e dati. Questo è come lo fai.
Si supponga altezza dei dati sta per essere x. Il vostro contenitore è relativa e piè di pagina è anche relativo. Tutto quello che dovete fare è aggiungere ai propri dati
bottom: -webkit-calc(-100% + x);
I tuoi dati saranno sempre sul fondo del contenitore. Funziona anche se si dispone di contenitore con altezza dinamica.
HTML sarà come questo
<div class="container">
<div class="data"></div>
</div>
CSS sarà come questo
.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);
}
Spero che questo aiuti.
Ecco un'altra soluzione utilizzando FlexBox ma senza usare flex-end per l'allineamento in basso. L'idea è di impostare margin-bottom su H1 a auto per spingere il restante contenuto sul fondo:
#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>
Possiamo anche fare lo stesso con margin-top:auto sul testo ma in questo caso abbiamo bisogno di avvolgerlo in 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>
se è possibile impostare l'altezza del div avvolgimento del contenuto (# header-contenuto, come mostrato nella risposta di altri), anziché l'intero #header, forse si può anche provare questo approccio:
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;
}
Sembra funzionare:
HTML: Sono in fondo
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
Ho trovato questa soluzione basata su un difetto di bootstrap iniziare 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>
Tutte queste risposte e nessuno ha lavorato per me ... Non sono un esperto FlexBox, ma questo era abbastanza facile da capire, è semplice e facile da capire e da utilizzare. Per separare qualcosa dal resto del contenuto, inserire un div vuoto e lasciarlo crescere per riempire lo spazio.
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>
Questo reagisce come previsto quando il contenuto di fondo non è fisso dimensionato anche quando il contenitore non è fisso dimensioni.
Ho escogitato un modo che è molto più semplice di quello che è stato detto.
Impostare l'altezza del div intestazione. Poi all'interno di quella, lo stile il tag H1 come segue:
float: left;
padding: 90px 10px 11px
Sto lavorando su un sito per un cliente, e il design richiede il testo di essere in fondo a un certo div. Ho raggiunto il risultato usando queste due linee, e funziona benissimo. Inoltre, se il testo non si espande, l'imbottitura sarà ancora lo stesso.
provare con:
div.myclass { margin-top: 100%; }
provare a cambiare l'% per risolvere il problema. Esempio:. 120% o il 90% ... etc
Il sito ho appena fatto per un cliente ha chiesto che il testo piè di pagina era una scatola alta, con il testo in fondo ho raggiunto questo con semplice imbottitura, dovrebbe funzionare per tutti i browser.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
Un esempio perfetto cross-browser è probabilmente questo uno qui:
http://www.csszengarden.com/?cssfile=/ 213 / 213.css & page = 0
L'idea è sia per visualizzare il div in basso e anche che lo rende bastone lì. Spesso l'approccio semplice farà il rotolo div appiccicosa con il contenuto principale.
A seguito un breve esempio completamente funzionante. Si noti che non c'è div embedding inganno richiesto. I numerosi regolamenti di base sono solo per forzare una barra di scorrimento ad apparire:
<!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 vi state chiedendo il codice potrebbe non funzionare su IE, ricordarsi di aggiungere il tag DOCTYPE in alto. E 'fondamentale per questo lavoro su IE. Inoltre, questo dovrebbe essere il primo tag e niente deve apparire sopra di esso.
Sembra funzionare:
#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;
}
meno rende risolvere i puzzle CSS molto più simile di codifica che come ... Adoro CSS. E 'un vero piacere quando si può cambiare l'intero layout (senza romperlo :) solo cambiando un parametro.
2.015 soluzione
<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
la vostra accoglienza
