741

Dato il seguente HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Vorrei #copyrightattenermi al fondo di #container.

Posso raggiungere questo obiettivo senza utilizzare il posizionamento assoluto? Se la proprietà float supportava un valore di 'bottom' sembra che farebbe il trucco, ma sfortunatamente no.

html css

— Dónal
fonte

211

Questa situazione è uno dei motivi per cui le tabelle di layout non sono ancora scomparse. Farlo con un tavolo è semplicissimo e funziona ovunque. Farlo in CSS è esilarantemente difficile e il supporto tra browser è così. Per non parlare del fatto che è impossibile ricordare come farlo nel modo giusto.

— Tomalak,

Non capisco la domanda. Perché è necessario utilizzare il posizionamento assoluto? Il contenitore ha un'altezza impostata, indipendentemente dal contenuto che contiene?

— HartleySan,

924

Probabilmente no.

Assegna position:relativea #container, quindi position:absolute; bottom:0;a #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Espandi frammento

— Utente
fonte

11

Se position: relative sul tuo contenitore rompe il tuo design, ricorda che puoi semplicemente includere un div wrapper all'interno del contenitore con un'altezza del 100% e aggiungi invece la posizione: relativa a quella.

— Jack Shepherd,

e se è per ripetere elementi, che altrimenti verrebbero posizionati uno sopra l'altro?

— CRice

6

Un elemento assolutamente posizionato cerca il suo genitore più vicino che sia assoluto o relativamente posizione per determinare la sua posizione. Se tutto fallisce, ricorre al corpo (finestra). Quindi da qui la necessità che il genitore sia relativo.

— user17753

1

aggiungi un margine inferiore a #container per impedire il copyright sul contenuto della pagina

— Doc Kodam,

1

L'approccio Flexbox di seguito è molto meglio.

— woohoo,

345

In realtà, la risposta accettata da @User funzionerà solo se la finestra è alta e il contenuto è breve. Ma se il contenuto è alto e la finestra è corta, inserirà le informazioni sul copyright sul contenuto della pagina, quindi scorrendo verso il basso per vedere il contenuto ti lascerà un avviso di copyright mobile. Ciò rende questa soluzione inutile per la maggior parte delle pagine (come questa pagina, in realtà).

Il modo più comune per farlo è l'approccio "piè di pagina CSS" dimostrato, o una variazione leggermente più sottile. Questo approccio funziona alla grande - SE hai un piè di pagina ad altezza fissa.

Se hai bisogno di un piè di pagina ad altezza variabile che verrà visualizzato nella parte inferiore della finestra se il contenuto è troppo corto e nella parte inferiore del contenuto se la finestra è troppo corta, cosa fai?

Ingoia il tuo orgoglio e usa un tavolo.

Per esempio:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

Espandi frammento

Provalo. Questo funzionerà per qualsiasi dimensione di finestra, per qualsiasi quantità di contenuto, per piè di pagina di qualsiasi dimensione, su ogni browser ... persino IE6.

Se stai pensando al pensiero di usare una tabella per il layout, prenditi un secondo per chiederti perché. Il CSS avrebbe dovuto semplificarci la vita - e nel complesso lo ha - ma il fatto è che anche dopo tutti questi anni, è ancora un casino rotto e controintuitivo. Non può risolvere ogni problema. È incompleta.

I tavoli non sono belli, ma almeno per ora, a volte sono il modo migliore per risolvere un problema di progettazione.

— Rick Reilly
fonte

80

Sembra la migliore risposta per me. Inoltre, puoi sempre usare "tabelle css" (display: table [-row / -cell]) invece delle tabelle html. Ciò fornisce lo stesso layout senza la semantica.

— Chiccodoro,

1

Se hai uno script PHP / altro che genera la tua pagina, puoi duplicare il tuo piè di pagina, usandone uno come "spaziatore" nascosto e uno posizionato in modo assoluto. Il piè di pagina del distanziatore garantisce che, indipendentemente dalla quantità di contenuto presente nel piè di pagina, non salirà la pagina.

— Tyzoid,

20

Per altri che leggono questi commenti: questo non ha nulla a che fare con "orgoglio" o essere "fighi". L'uso delle tabelle per il layout è pragmaticamente ancora più doloroso, specialmente per grandi quantità di contenuti. Fare in modo di non perdere nulla e setacciare un markup così irrilevante quando si aggiunge contenuto è un inferno. È doloroso perché stiamo creando documenti HTML non solo layout, e se la maggior parte del contenuto del nostro documento non è costituito da dati tabulari, perché lo inseriamo nelle tabelle? Se non ci piace usare le tecnologie web nel modo in cui erano pensate, perché usarle? Usa invece le app desktop / mobili per pubblicare contenuti

— gabe

1

@chiccodoro Ho implementato un equivalente senza tavolo che è sorprendentemente minimo, controlla la mia risposta qui sotto

— Hashbrown

59

L'orgoglio è irrilevante. Le tabelle non devono essere utilizzate per il layout, per motivi di accessibilità. Se hai mai usato uno screen reader, saprai perché le tabelle dovrebbero essere utilizzate solo per i dati tabulari. Usa le tabelle css come afferma @chiccodoro.

— Matt Fellows

171

L'approccio flexbox!

Nei browser supportati , è possibile utilizzare quanto segue:

Esempio qui

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

Mostra snippet di codice

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Espandi frammento

La soluzione sopra è probabilmente più flessibile, tuttavia, ecco una soluzione alternativa:

Esempio qui

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

Mostra snippet di codice

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Espandi frammento

Come nota a margine, potresti voler aggiungere prefissi fornitore per ulteriore supporto.

— Josh Crozier
fonte

3

che ne dici di un column-reversegenitore, quindi non è necessario aggiungere nulla al bambino?

— Max Waterman,

1

Probabilmente questa dovrebbe essere la risposta accettata - nessun hack, nessun posizionamento assoluto, overflow funziona in modo pulito quando necessario (era per me).

— Adverbly

114

Sì , puoi farlo senza absoluteposizionare e senza usare tables (quale vite con markup e simili).

DEMO
Questo è testato per funzionare su IE> 7, Chrome, FF ed è una cosa davvero semplice da aggiungere al layout esistente.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

Fa effettivamente ciò che float:bottomfarebbe, anche tenendo conto del problema sottolineato nella risposta di @Rick Reilly!

— hashbrown
fonte

1

Bello! Solo una nota, IIRC è necessario il <!DOCTYPE>set affinché questo funzioni su IE (<= 8 almeno); quelle versioni precedenti supportano solo display:table-XXXin modalità "standard". Ma la modalità standard interromperà anche molte pagine progettate, ad esempio, per IE6.

— David,

3

È inoltre possibile utilizzare FlexBox - stackoverflow.com/questions/526035/...

— Josh Crozier

2

Ho trovato più fortuna con .foot{display: table-footer-group}. Non avevo bisogno vertical-align, heighto border-collapse.

— Jacob Valenta,

Funzionerebbe se #containercontenesse solo #foote nessun altro contenuto?

— Solace,

sembra che avrebbe almeno bisogno di uno spazio non-break , @Solace

— Hashbrown,

20

È una vecchia domanda, ma questo è un approccio unico che può aiutare in diversi casi.

CSS puro, senza posizionamento assoluto, senza fissare alcuna altezza, Cross-Browser (IE9 +)

dai un'occhiata a Working Fiddle

Poiché il flusso normale è "dall'alto verso il basso", non possiamo semplicemente chiedere al #copyrightdiv di rimanere sul fondo del suo genitore senza un posizionamento assoluto di qualche tipo, ma se volessimo che il #copyrightdiv si attaccasse alla cima del suo genitore, sarà molto semplice, perché questo è il normale flusso.

Quindi useremo questo a nostro vantaggio. cambieremo l'ordine delle divs nell'HTML, ora il #copyrightdiv è in alto e il contenuto lo segue immediatamente. facciamo anche estendere completamente il div div (usando pseudo elementi e tecniche di clearing)

ora si tratta solo di invertire tale ordine nella vista. che può essere fatto facilmente con la trasformazione CSS.

Ruotiamo il contenitore di 180 gradi, e ora: su-giù-giù. (e invertiamo il contenuto in modo che appaia di nuovo normale)

Se vogliamo avere una barra di scorrimento nell'area dei contenuti, dobbiamo applicare un po 'più di magia CSS. come può essere mostrato qui [in questo esempio, il contenuto è sotto un'intestazione - ma è la stessa idea]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

Espandi frammento

— avrahamcool
fonte

2

Per favore no, guarda quanto è orribile il rendering ora i.stack.imgur.com/ZP9Hw.png

— grg

7

Crea un altro contenitore divper gli elementi sopra #copyright. Appena sopra il copyright aggiungi un nuovo div: <div style="clear:both;"></div> costringerà il piè di pagina a essere sotto ogni altra cosa, proprio come nel caso dell'utilizzo del posizionamento relativo ( bottom:0px;).

— Rápli András
fonte

7

Prova questo;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— Gary Green
fonte

1

@Feelsbadman Per favore, non modificare il codice di altre persone in risposte del genere. Se intendevi semplicemente separare il CSS dall'HTML, tieni presente che hai inavvertitamente cambiato il codice in qualcos'altro, eventualmente invalidando la risposta e sicuramente cambiando l'intento del poster.

— TylerH,

6

Mentre nessuna delle risposte fornite qui sembrava applicarsi o funzionare nel mio caso particolare, mi sono imbattuto in questo articolo che fornisce questa soluzione pulita:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

Lo trovo molto utile per applicare il design reattivo per il display mobile senza dover riordinare tutto il codice html di un sito Web, impostandosi bodycome tabella.

Nota che solo il primo table-footer-groupo table-header-groupverrà visualizzato come tale: se ce ne sono più di uno, gli altri verranno resi come table-row-group.

— Skippy le Grand Gourou
fonte

6

Griglia CSS

Poiché l'utilizzo della griglia CSS è in aumento, vorrei suggerire align-selfl'elemento che si trova all'interno di un contenitore della griglia.

align-selfpuò contenere i valori: end, self-end, flex-endper il seguente esempio.

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

Espandi frammento

— Manoj Kumar
fonte

5

È possibile infatti aligncasella a bottomsenza utilizzare position:absolutese si conosce la heightdel #containerutilizzando l'allineamento del testo caratteristica di inline-blockelementi.

Qui puoi vederlo in azione.

Questo è il codice:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

— jacmkno
fonte

5

Utilizzando la proprietà translateY e top

Basta impostare l'elemento figlio in posizione: relativo e poi spostarlo in alto: 100% (che è l'altezza del 100% del genitore) e attenersi alla fine del genitore trasformando: translateY (-100%) (che è -100% dell'altezza di il bambino).

Benefici

tu non prendi l'elemento dal flusso pagina
è dinamico

Ma ancora solo una soluzione alternativa :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Non dimenticare i prefissi per il browser precedente.

— Samuell
fonte

4

Link CodePen qui .

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

Espandi frammento

— azizarslan
fonte

3

Se vuoi che "si attacchi" al fondo, indipendentemente dall'altezza del contenitore, il posizionamento assoluto è la strada da percorrere. Naturalmente, se l'elemento copyright è l'ultimo nel contenitore, sarà sempre in fondo comunque.

Puoi espandere la tua domanda? Spiega esattamente cosa stai cercando di fare (e perché non vuoi usare il posizionamento assoluto)?

— Jack Sleight
fonte

2

Inoltre, se ci sono delle clausole sull'utilizzo di position:absolute;o position:relative;, puoi sempre provare un padding genitore div o inserire un margin-top:x;. Nella maggior parte dei casi non è un ottimo metodo, ma in alcuni casi può tornare utile.

— Ghost Echo
fonte

1

Forse questo aiuta qualcuno: puoi sempre posizionare il div fuori dall'altro div e quindi spingerlo verso l'alto usando il margine negativo:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

— DesignConsult
fonte

1

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Espandi frammento

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Espandi frammento

— Anmol Ratan Mohla
fonte

1

Non voglio usare "position: absolute" per il piè di pagina appiccicoso in basso. Quindi puoi farlo in questo modo:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

Espandi frammento

— Nilesh Pawar
fonte

Ciao nilesh; questa soluzione è già fornita in più risposte. Assicurati di leggere tutte le risposte esistenti a una domanda prima di fornirne una nuova, per assicurarti che non ci siano duplicazioni di contenuti!

— TylerH,

1

Se non si conosce l'altezza del blocco figlio:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

Espandi frammento

http://jsbin.com/ULUXIFon/3/edit

Se conosci l'altezza del blocco figlio aggiungi il blocco figlio quindi aggiungi padding-top / margin-top:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

Espandi frammento

— zloctb
fonte

0

Solo perché non è stato menzionato affatto, ciò che di solito funziona bene in situazioni come la tua:

Posizionamento del copyright div dopo il container-div

Dovresti solo formattare il copyright div in un modo simile all'altro contenitore (stessa larghezza complessiva, centratura, ecc.), E tutto va bene.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

L'unica volta che questo potrebbe non essere l'ideale è quando viene dichiarato il tuo contenitore-div height:100%e l'utente dovrebbe scorrere verso il basso per vedere il copyright. Ma anche tu potresti ancora aggirare (ad esempio margin-top:-20px- quando l'altezza del tuo elemento di copyright è di 20px).

Nessun posizionamento assoluto
Nessun layout di tabella
Nessun pazzo css, che sembra diverso in ogni altro browser (beh IE almeno, lo sai)
Formattazione semplice e chiara

A parte: so che l'OP ha chiesto una soluzione che "... si attacca al fondo del div contenitore" ... e non qualcosa sotto di esso, ma dai, la gente sta cercando buone soluzioni qui, e questo è uno!

— levita
fonte

Nel caso di OP, questa soluzione è valida solo se #copyright è ad altezza fissa (quindi è possibile impostare margin-top: -{element height}.

— Gajus

@Gajus: questo non è un posizionamento assoluto né fisso. Questo fa esattamente ciò che l'OP vuole (non importa l'altezza del copyright), con la sola eccezione che il div del copyright non si trova nel primo contenitore. L'OP ha chiesto che il copyright rimanga sul fondo del contenitore, non sulla pagina !!

— Levita,

Spiacenti, non intendo se il contenitore del contenitore # è ad altezza fissa.

— Gajus,

A meno che non mi sbagli di me stesso, il vero problema che OP sta cercando di risolvere è il fondo dell'elemento quando l'altezza dell'elemento è dettata da un altro elemento, ad esempio con i commenti jsbin.com/acoVevI/3 . Qui non puoi semplicemente mettere il pulsante fuori dal contenitore . Per illustrare ulteriormente il problema, consultare jsbin.com/acoVevI/4 .

— Gajus,

L'OP ha dichiarato: "Vorrei che #copyright aderisse al fondo di #container", quindi questo non è del tutto chiaro dalla domanda. Inoltre questo è un esempio valido per ogni caso in cui semplicemente "si attacca al fondo di #container". Questa soluzione dovrebbe essere utile, ha un approccio pulito e funziona bene per molti layout. Ad esempio qualsiasi pagina con contenuti scorrevoli, come stackoverflow.com ;-)

— Levite,

0

Ecco un approccio mirato a far fluttuare verso destra un elemento con un'altezza e una larghezza note (almeno approssimativamente) e rimanere nella parte inferiore, comportandosi come un elemento inline rispetto agli altri elementi. È focalizzato in basso a destra perché puoi posizionarlo facilmente in qualsiasi altro angolo attraverso altri metodi.

Avevo bisogno di creare una barra di navigazione che avesse i collegamenti effettivi in basso a destra e elementi di fratelli casuali, assicurando al contempo che la barra stessa si allungasse correttamente, senza interrompere il layout. Ho usato un elemento "ombra" per occupare lo spazio dei collegamenti della barra di navigazione e l'ho aggiunto alla fine dei nodi figlio del contenitore.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

— Zyox
fonte

0

Non c'è niente chiamato float:bottomnei CSS. Il modo migliore è utilizzare il posizionamento in questi casi:

position:absolute;
bottom:0;

— Touhid Rahman
fonte

Per favore, spiega la tua risposta.

— Mohit Raj Purohit,

0

Per quelli che hanno solo un figlio nel contenitore, puoi usare l' approccio table-celle vertical-alignche ha funzionato in modo affidabile per posizionare un singolo div in fondo al suo genitore.

Si noti che l'utilizzo table-footer-groupcome altre risposte menzionate interromperà il calcolo dell'altezza del genitore table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}

<div id="container">
    <div id="item">Single bottom item</div>
</div>

Espandi frammento

— Hai Zhang
fonte

0

Secondo: w3schools.com

Un elemento con posizione: assoluto; è posizionato rispetto all'antenato posizionato più vicino (anziché posizionato rispetto alla finestra, come fisso).

Quindi è necessario posizionare l'elemento genitore con qualcosa di relativo o assoluto, ecc. E posizionare l'elemento desiderato su assoluto e quest'ultimo in fondo a 0.

— Jonas Freire
fonte

Questo è già menzionato nella risposta accettata (tra gli altri).

— TylerH,

-1

Div di stile, position:absolute;bottom:5px;width:100%;funziona, ma ha richiesto una maggiore situazione di scorrimento.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

— nicejay
fonte

Come posso posizionare il mio div sul fondo del suo contenitore?

L'approccio flexbox!

CSS puro, senza posizionamento assoluto, senza fissare alcuna altezza, Cross-Browser (IE9 +)

Griglia CSS

Utilizzando la proprietà translateY e top