piè di pagina in basso contenuto, ma non se galleggiante mezz'aria non abbastanza contenuto

Question

ho ottenuto questo codice:

DEMO: http://jsfiddle.net/z21nz89d/2/

HTML:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
    <div class="container"> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
    </div> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <p>Some footer-content</p> 
        <p>Some footer-content</p> 
        <p>Some footer-content</p> 
       </div> 
       <div class="col-md-4"> 
        <p>Some footer-content</p> 
        <p>Some footer-content</p> 
       </div> 
      </div> 
     </div> 
    </footer> 

CSS:

footer { 
    background-color: #eee; 
    padding-top: 15px; 
    padding-left: 15px; 
} 

È una specie di base di ciò che ho, ma capirai il punto. Come puoi vedere il footer è posizionato da qualche parte a mezz'aria. Potrei posizionarlo in modo assoluto e renderlo facilmente appiccicoso, ma per vari motivi non lo voglio.

Voglio il piè di pagina al di sotto l'intero contenuto (si fa per dire, indicato come ultima), tuttavia, se non c'è abbastanza contenuto che ho bisogno il piè di pagina per essere posizionato in basso: 0 e rimasto: 0.

Non ho idea di come realizzare questo. La mia prima ipotesi sarebbe stata quella di usare JavaScript per vedere quanto spazio c'è e se il sito è scorrevole o no.

Answer 1

Questo è il modo più semplice che ho trovato per fare un buon footer. Avvolgi tutto tranne il piè di pagina in un div "wrapper". Quindi imposta il tuo html e altezza del corpo al 100%, con un'altezza minima del 100% sul tuo involucro. Successivamente, è necessario fornire un margine inferiore e un riempimento inferiore a questo wrapper avente la stessa altezza del piè di pagina. Esso funziona magicamente.

Demo here

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    margin-bottom: -100px; 
    padding-bottom: 100px; 
} 
footer { 
    height: 100px; 
} 

Answer 2

Se davvero si vuole farlo nel modo javascript, è possibile ottenere con questo codice:

http://jsfiddle.net/z21nz89d/6/

$(function() { 
    var windowHeight = $(window).height(); 
    var contHeight = $(".main-container").height(); 
    var footHeight = $("footer").height(); 
    var testHeight = windowHeight - footHeight; 

    if (contHeight < testHeight) { 
     $("footer").css("bottom", "0"); 
     $("footer").css("left", "0"); 
    } 
}); 

Assicurarsi di aggiungere il seguente CSS regole, le cose HTML, BODY sono molto importanti.

html, body { 
    height: 100%; 
    width: 100%; 
    min-height: 100%; 
    padding: 0; 
    margin: 0; 
} 

Avrete anche per avvolgere TUTTE vostro contesto tranne che per il piè di pagina in un div con una classe di, diciamo, "main-contenitore", in questo modo è possibile verificare l'altezza di tutto il corpo contro il altezza del contenuto meno il piè di pagina, capisci?

È tutto il JSFiddle.

Basta notare che questo non è il modo semantico di farlo. A mio parere, un puro footer sticky sarebbe meglio. Se non puoi usarne uno, funzionerà.

Answer 3

È possibile utilizzare questo codice CSS reattivo e si sta lavorando in tutti i browser di e può cambiare in base alle dimensioni del browser quando il browser può ridimensionata.

Live Working Demo

codice HTML: Codice

<div id="wrapper"> 

    <div id="header"> 
     Header is here 
    </div><!-- #header --> 

    <div id="content"> 
     Content is here 
    </div><!-- #content --> 

    <div id="footer"> 
     Footer is here 
    </div><!-- #footer --> 

</div><!-- #wrapper --> 

CSS:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ededed; 
    padding:10px; 
    text-align:center; 
} 
#content { 
    padding-bottom:100px; /* Height of the footer element */ 
    text-align:center; 
} 
#footer { 
    background:#ffab62; 
    width:100%; 
    height:100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    text-align:center; 
} 

Risultato:

Answer 4

Solution con la posizione flex qui: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Answer 5

Se l'altezza del piè di pagina è sconosciuta, è meglio usare flex, qualcosa nelle linee di:

<body> 
    <header></header> 
    <div class="content"></div> 
    <footer></footer> 
</body> 

E per i CSS solo questo è necessario:

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 
.content { 
    flex: 1; 
} 

E non è necessario impostare il display: flex al corpo, può anche essere un involucro all'interno del corpo.

Ricordare che questo potrebbe non funzionare come previsto su IE (vedere il link CANI di seguito). Comunque funziona abbastanza bene per la maggior parte ora!

Vedere this link per un esempio.