Piè di pagina a fondo pagina, Twitter Bootstrap

306

Ho generalmente familiarità con la tecnica di svuotare un piè di pagina usando CSS.

Ma ho qualche problema a far funzionare questo approccio per il bootstrap di Twitter, molto probabilmente a causa del fatto che il bootstrap di Twitter è reattivo in natura. Usando il bootstrap di Twitter non riesco a far scorrere il piè di pagina in fondo alla pagina usando l'approccio descritto nel precedente post sul blog.

css  twitter-bootstrap  footer 
— Calvin Cheng
fonte
Prima di provare tutte le risposte di seguito, tieni presente che l'OP vuole farlo funzionare con Twitter Bootstrap. Dato che non è un must, Twitter Bootstrap funziona con Jquery, il che significa che è abilitato Javascript.Per questo motivo prova solo la mia risposta: stackoverflow.com / questions / 10099422 /…
— HenryW,
4
— utente
1
Il collegamento è interrotto! Qualcuno può risolvere il link ufficiale di esempio?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar potrebbe diventare una versione precedente in futuro a causa di 4.0, credo.
— Ammad Khalid,

Risposte:

324

Trovato che i frammenti qui funzionano davvero bene per bootstrap

html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
— Chuan Yeong
fonte
Questa è la migliore soluzione che ho tentato finora. Accettato come risposta.
— Calvin Cheng,
Ciao, ho implementato questo metodo, funziona benissimo ma ora ho qualche problema con la visualizzazione della pagina su iPhone (la pagina è ingrandita). Qualche idea qual è il problema? Ecco alcuni dettagli: stackoverflow.com/questions/18621090/...
— pupadupa
94
Nel caso in cui tu abbia letto questa risposta e non abbia fatto scorrere verso il basso vale la pena guardare le altre risposte
— MattyW,
4
— HenryW
1
Questo è il metodo migliore che ho trovato per Bootstrap. Per la reattività del dispositivo, ricorda di utilizzare le query multimediali per aggiornare #main e .footer altezze per schermi di dimensioni diverse
— SyntaxGoonoo
467

Questo è ora incluso in Bootstrap 2.2.1.

Bootstrap 3.x

Utilizzare il componente della barra di navigazione e aggiungere .navbar-fixed-bottom classe:

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

Non dimenticare di aggiungere body { padding-bottom: 70px; }o altrimenti il ​​contenuto della pagina potrebbe essere coperto.

Documenti: http://getbootstrap.com/components/#navbar-fixed-bottom

— Sanon
fonte
35
@ChuanYeong Purtroppo non c'è navbar-static-bottom.
— Lawrence Woodman,
25
@MikeCurry non ha chiesto di un piè di pagina fisso, ma di uno che "riempie" lo spazio vuoto, se la tua pagina non ha abbastanza contenuti per rendere il piè di pagina in fondo. Se il tuo piè di pagina è solo informativo, uno fisso occupa solo spazio prezioso.
— rdlu,
22
Questo non è un piè di pagina appiccicoso, perché è usato position: fixed; che non è giusto
— Furkat U.
9
Sì, questa soluzione si scarica solo nella parte inferiore della finestra e non nella parte inferiore della pagina. cioè il piè di pagina è sempre visibile.
— rism
3
Ho dovuto sottovalutare la risposta perché crea confusione. L'OP non vuole un footer appiccicoso.
— HenryW,
77

Un esempio funzionante per il bootstrap di Twitter NON STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Versione che si aggiorna sempre nel caso in cui l'utente apra devtools o ridimensiona la finestra.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

È necessario almeno un elemento con a #footer

Quando non vuoi la barra di scorrimento se il contenuto si adatta allo schermo, modifica il valore da 10 a 0
La barra di scorrimento verrà visualizzata se il contenuto non si adatta allo schermo.

— HenryW
fonte
9
Sì, sono andato anche con questo. I CSS possono essere così stupidi a volte. Non che sia impossibile, ma le soluzioni di uso generale possono essere difficili da trovare e risolvere cose fastidiose come questa nei nostri layout non dovrebbe fare viaggi per impilare lo scambio, revisioni multiple, test cross-browser ed eventuale resa a un semplice JS trucco. Sì, mi sento un po 'sporco, ma almeno funziona.
— meecect
3
ogni singola soluzione che ho visto è sbagliata. Questo è l'UNICO che fa effettivamente ciò che dovrebbe fare: attaccare il piè di pagina in fondo alla pagina, senza oscurare alcun contenuto se il browser viene ridimensionato.
— Dave,
13
non ha funzionato silenziosamente come previsto per me, comunque, una delle risposte migliori, ho risolto il mio problema sostituendolo $('#footer').height();con$('#footer').outerHeight();
— DarkMukke
3
Bella risposta! Ho avuto un paio di adattamenti che penso migliorino qui: stackoverflow.com/a/36385654/8207
— Cory
6
La migliore risposta che ho trovato. Se vuoi che funzioni dopo il ridimensionamento della finestra, inserisci il codice principale dalla risposta all'interno $(window).resize(function() {//main code goes here});e invocalo $(window).resize();per impostarlo quando la pagina viene caricata.
— Szymon Sadło,
36

Ecco come implementarlo dalla pagina ufficiale:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

L'ho appena provato e FUNZIONA GRANDE! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Il codice CSS pertinente è questo:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
— Leniel Maccaferri
fonte
7
Grazie per aver pubblicato questo, è stata sicuramente la soluzione migliore (per non dire l'unica che ha funzionato) per il mio progetto particolare, e ovviamente è bello che sia direttamente dal progetto stesso.
— Cory W.
1
Non so quale fosse l'affare, ma non sono riuscito a farlo funzionare senza aggiungere uno scorrimento alle pagine. Ho finito per cambiare il CSS .wrapper quindi l'altezza minima era "calc (100% - 120px)" dove il 120px è l'altezza del mio piè di pagina e ho rimosso <div id = "push"> </div> dall'html dal momento che non sembrava fare nulla a parte aggiungere altezza alla pagina che non mi serviva.
— jammyman34,
36

Per Sticky Footer ne utilizziamo due DIV'snell'HTML per il footer appiccicoso di base effetto . Scrivi così:

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— Sandeep
fonte
7
Ha detto che sta usando Twitter Bootstrap. Quale sarebbe il modo più semplice per integrarlo in Bootstrap senza riscrivere completamente l'HTML?
— Cody Grey
1
Se OP voglia è per ottenere un effetto Sticky Footer poi si deve cambiare il suo MarkUp
— Sandeep
Grazie! Questo è stato l'unico metodo che ha funzionato per me in un sito ASP.NET MVC5 che utilizza Bootstrap. +1
— Yann Duran,
19

Beh, ho trovato un mix di navbar-innere navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Sembra buono e funziona per me

inserisci qui la descrizione dell'immagine

Vedi esempio in Fiddle

— Maxim Shoustin
fonte
2
soluzione più semplice ed elegante.
— Fai attenzione
L'ho usato e ho avuto un problema su un vecchio androide (forse froy?) Con pagine più corte dello schermo. Altrimenti ha funzionato bene su FF, Chrome, IE11, iPhone, nexus 7.
— bnieland
Perfetto ed estremamente semplice!
— ramires.cabral il
18

Nella versione più recente di bootstrap 4.3, questo può essere fatto utilizzando .fixed-bottomdi classe. 

<div class="fixed-bottom"></div>

Ecco come lo uso con il piè di pagina: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Puoi trovare ulteriori informazioni nella documentazione sulla posizione qui .

— Mohamed Ali JAMAOUI
fonte
1
Funziona ancora con la versione ufficiale 4 scatenata.
— Klewis,
Si noti che l'esempio su getbootstrap.com/docs/4.1/examples/sticky-footer ha uno stile line-height = 60px sull'elemento footer. Questo non è solo non necessario, ma impedisce anche al piè di pagina di funzionare correttamente se è il genitore di uno o più elementi div, come spesso accade.
— ScottyB,
13

La risposta di HenryW è buona, anche se avevo bisogno di alcune modifiche per farlo funzionare come volevo. In particolare, gestisce anche:

  • Evitare il "jumpiness" sul caricamento della pagina contrassegnando prima invisibile e impostando visibile in javascript
  • Trattare con il browser si ridimensiona con grazia
  • Inoltre, impostare il piè di pagina per il backup della pagina se il browser diventa più piccolo e il piè di pagina diventa più grande della pagina
  • Modifiche alla funzione altezza

Ecco cosa ha funzionato per me con quelle modifiche:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
— Cory
fonte
11

Questo ha funzionato perfettamente per me.

Aggiungi questa classe navbar-fixed-bottom al tuo piè di pagina.

<div class="footer navbar-fixed-bottom">

L'ho usato così:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

E si posiziona sul fondo per l'intera larghezza.

Modifica: questo renderà il piè di pagina sempre visibile, è qualcosa che devi prendere in considerazione.

— sp_omer
fonte
10

Devi avvolgere il tuo .container-fluiddiv per far funzionare il tuo piè di pagina appiccicoso, ti mancano anche alcune proprietà della tua .wrapperclasse. Prova questo:

Rimuovi padding-top:70pxdal bodytag e includilo nel tuo .container-fluid, in questo modo:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Dobbiamo farlo perché spingere bodyverso il basso per sistemare la barra di navigazione finisce per spingere il piè di pagina un po 'più avanti (70px più avanti) oltre la finestra in modo da ottenere una barra di scorrimento. Otteniamo risultati migliori spingendo .container-fluidinvece il div.

Quindi dobbiamo rimuovere la .wrapperclasse fuori dal tuo .container-fluiddiv e avvolgere il tuo #maindiv con esso, in questo modo:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Il tuo footer ovviamente deve essere fuori dal .wrapperdiv, quindi rimuovilo dal `.wrapper div e posizionalo all'esterno, in questo modo:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Al termine, avvicina correttamente il piè di pagina alla tua .wrapperclasse utilizzando un margine negativo, in questo modo:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

E dovrebbe funzionare, anche se probabilmente dovrai modificare alcune altre cose per farlo funzionare quando lo schermo viene ridimensionato, come ripristinare l'altezza sulla .wrapperclasse, in questo modo:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
— Andres Ilich
fonte
9

Questo è il modo giusto per farlo con Twitter Bootstrap e la nuova classe navbar-fixed-bottom: (non hai idea di quanto tempo ho trascorso a cercare questo)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
— Régis B.
fonte
9

Usa le utility flex integrate in Bootstrap 4! Ecco cosa mi è venuto in mente usando principalmente utility Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex per rendere il div principale un contenitore flessibile
  • .flex-column sul div principale per disporre i tuoi oggetti flessibili in una colonna
  • min-height: 100vh al div principale, con un attributo di stile o nel tuo CSS, per riempire verticalmente la finestra
  • .flex-grow-1 sul contenitore, l'elemento per fare in modo che il contenitore del contenuto principale occupi tutto lo spazio che rimane nell'altezza della finestra.
— EGhost57
fonte
Invece min-height: 100vhdella min-vh-100classe da Bootstrap può essere utilizzato.
— Ikonuk,
Questa soluzione ha funzionato alla grande tra cui il suggerimento min-vh-100 di @ikonuk
— TGR il
4

Utilizzare il componente navbar e aggiungere la classe .navbar-fixed-bottom:

<div class="navbar navbar-fixed-bottom"></div>

aggiungi il corpo 

  { padding-bottom: 70px; }
— Admin File3
fonte
3

per gestire i layout dei vincoli di larghezza utilizzare quanto segue in modo da non ottenere angoli arrotondati e in modo che la barra di spostamento sia allineata ai lati dell'applicazione

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

quindi puoi usare css per sovrascrivere le classi bootstrap per regolare altezza, carattere e colore

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
— 1-14x0r
fonte
3

È possibile utilizzare jQuery per gestire questo:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
— DucCuong
fonte
2

L'unico che ha funzionato per me !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— Ricardo
fonte
2

La tecnica più semplice è probabilmente quella di utilizzare Bootstrap navbar-static-bottominsieme all'impostazione del div contenitore principale con height: 100vh(nuova percentuale della porta di visualizzazione CSS3 ). Questo farà scorrere il piè di pagina sul fondo.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
— Pan Wangperawong
fonte
2

Testato con Bootstrap 3.6.6 .

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
— Dušan Maďar
fonte
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

L'altezza del piè di pagina corrisponde alla dimensione del rientro inferiore dell'elemento di avvolgimento.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— Sharpless512
fonte
1

Ecco una soluzione per la versione più recente di Bootstrap (4.3 al momento della stesura) utilizzando Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

E un esempio di codepen: https://codepen.io/tillytoby/pen/QPdomR

— Tom T
fonte
1

Come nell'esempio di Bootstrap 4.3 , nel caso in cui stai perdendo la sanità mentale come ho fatto io, ecco come funziona effettivamente:

  • Tutti i genitori del div footer devono avere height: 100%( h-100classe)
  • Il genitore diretto del piè di pagina deve avere display: flex( d-flexclasse)
  • Il piè di pagina deve avere margin-top: auto( mt-autoclasse)

Il problema è che nei moderni framework front-end abbiamo spesso wrapper aggiuntivi attorno a questi elementi.

Ad esempio, nel mio caso, con Angular, ho composto la vista da una radice dell'app, un componente dell'app principale e un componente piè di pagina separati, ognuno dei quali ha aggiunto il proprio elemento personalizzato al DOM.

Quindi, per farlo funzionare, ho dovuto aggiungere classi a questi elementi wrapper: un ulteriore h-100, spostando di d-flexun livello in basso e spostando di mt-autoun livello in alto dal piè di pagina (quindi in realtà non è più nella classe piè di pagina, ma sulla mia <app-footer>abitudine elemento).

— MrValueType
fonte
Ho dovuto mettere class="h-100"anche il <html>tag.
— Kel Solaar,
1

Usa questo pezzo di codice nel bootstrap che funziona

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— sanjay
fonte
1

Soluzione Bootstrap v4 +

Ecco una soluzione che non richiede il ripensamento della struttura HTML o eventuali trucchi CSS aggiuntivi che coinvolgono il riempimento:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Si noti che questa soluzione consente di utilizzare piè di pagina con altezze flessibili, il che risulta particolarmente utile quando si progettano pagine per schermi di dimensioni multiple con involucro di contenuto ridotto.

Perché questo funziona

  • style="height:100%;"fa sì che il <html>tag occupi l'intero spazio del documento.
  • la classe si d-fleximposta display:flexsul nostro <body>tag.
  • la classe si flex-columnimposta flex-direction:columnsul nostro <body>tag. I suoi bambini ( <header>, <main>,<footer> e qualsiasi altro figlio diretto) sono ora allineati verticalmente.
  • classe h-100impostata height:100%sul nostro<body> tag, il che significa che coprirà l'intero schermo in verticale.
  • la classe si flex-grow-1imposta flex-grow:1sulla nostra <main>, ordinandole efficacemente di riempire qualsiasi spazio verticale rimanente, pari quindi all'altezza verticale del 100% che abbiamo impostato prima sul nostro <body>tag.

Demo di lavoro qui: https://codepen.io/maxencemaire/pen/VwvyRQB

Vedi https://css-tricks.com/snippets/css/a-guide-to-flexbox/ per maggiori informazioni su flexbox.

— Kathandrax
fonte
h-100la classe non funziona correttamente, è meglio usarla min-vh-100.
— ikonuk,
@ikonuk Cosa intendi esattamente con "non funziona correttamente"? Per favore, elabora.
— Kathandrax,
Perché la h-100classe dipende sempre dall'altezza degli elementi padre e potrebbe non funzionare correttamente in alcuni casi. Poiché desideriamo il piè di pagina nella parte inferiore della finestra, sarebbe consigliabile utilizzare l'altezza della finestra.
— ikonuk,
Ancora una volta, definire "alcuni casi". Il tuo argomento sulla dipendenza padre si applica allo stesso modo a min-width. Ecco perché il HTMLtag ha un height100% nel codice. L'esempio funziona e non vedo perché non abbia fornito il supporto cross-browser per la heightproprietà CSS , che alla fine è ciò in cui si traduce lo snippet Bootstrap.
— Kathandrax il
Non ho detto che il tuo esempio non funziona. Non tutti usano lo stile nel HTMLtag. Nel mio caso, la tua soluzione non ha funzionato poiché non preferisco usare lo stile nel HTMLtag. E non voglio che il bodytag dipenda da un altro genitore ma dal viewport. Non devi mettere style="height:100%;"e h-100allo stesso tempo. Mettere min-vh-100al corpo fa semplicemente il lavoro e meno codice.
— Ikonuk
0

Sembra che la height:100%"catena" sia spezzata div#main. Prova ad aggiungerlo height:100%e questo potrebbe avvicinarti al tuo obiettivo.

— brains911
fonte
0

Qui troverai l'approccio in HAML ( http://haml.info ) con barra di navigazione in alto e piè di pagina in fondo alla pagina:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— Hannes
fonte
Potresti approfondire un po 'la tua risposta? Le risposte di solo codice sono generalmente sconsigliate.
— Qix - MONICA È STATA MISTREATA il
1
Ok, cosa vuoi sapere?
— Hannes,
Non ho bisogno di saperlo, ma qualcuno che verrà in questo sito in seguito potrebbe non sapere esattamente perché il codice della tua risposta fa quello che fa.
— Qix - MONICA È STATA MISTREATA il
Probabilmente dovrei eliminarlo. Ho scritto una nuova introduzione. :)
— Hannes,
0

Keep it simple.

footer {
  bottom: 0;
  position: absolute;
}

Potrebbe essere necessario anche compensare l'altezza del piè di pagina aggiungendo un margin-bottomequivalente all'altezza del piè di pagina al body.

— obfk
fonte
0

Ecco un esempio usando css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

violino

— Vincitore
fonte
0

un'altra possibile soluzione, usando solo le query multimediali

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
— GeorgeWL
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.