Stick piè di pagina in fondo alla pagina, senza (inutili) le barre di scorrimento

Question

EDIT 2:

C'è stato un errore nel mio codice che stava causando il piè di pagina di non attaccarsi al fondo della pagina. Il mio codice sembrava qualcosa di simile:

<div id="footer"> 
<div id="copyright-bg" class="container"> 
    <div class="row"> 
    <div class="twelvecol"> 
    <p class="copyright-text">Lorum Ipsum</p> 
</div> 
</div> 
</div> 
</div> 

ho rimosso <div id="footer"> e si è trasferito le proprietà CSS per id="copyright-bg" e poi cominciò a bastone correttamente fino in fondo. Ma ora c'è un altro problema sollevato! Ora ho delle barre di scorrimento inutili! Here is a Fiddle che ha il codice più basso per tentare di capire cosa sta succedendo. Ho pensato che potrebbe essere il gradiente, ma quando ho cambiato il codice in uno sfondo solido le barre di scorrimento sono ancora apparse.

Nota: l'ho provato in Chrome e Firefox.

EDIT:

ho tentato di usare il CSS Sticky Footer secondo le istruzioni sul website.

Presumo che ci sia un conflitto nel mio CSS (?) here is a Fiddle della pagina.

Ho anche provato quello che this website suggested e mentre tecnicamente funziona crea barre di scorrimento! Vorrei evitarlo, se possibile.

domanda iniziale

Sto lavorando su una pagina e se la pagina non ha molto contenuto (cioè senza barre di scorrimento per pagina) sono lasciato con una barra nera sotto il mio contenitore di diritti d'autore.

Ecco uno screenshot:

Nota: Dove si vede la parola Done è il fondo del mio browser, una freccia punta verso la barra nera.

Ho tentato un paio di cose per rimuovere la barra. Quando aggiungo lo height: 100%; al tag body, il gradiente di sfondo verrà raggiunto e raggiungerà il fondo della pagina, ma di nuovo non sembra buono. Ho quindi tentato di aggiungere height: 100% al contenitore del copyright. Ciò ha causato l'allargamento dell'area grigia e l'eccessiva disponibilità di spazio vuoto e barre di scorrimento. Ho tentato di posizionare l'elemento in modo assoluto ma questo causa diversi altri problemi e preferirei evitare il posizionamento in modo assoluto.

Come rimuovere la barra nera?(Preferibilmente con solo i CSS ma accetterà una risposta che utilizza jQuery/Javascript)

CODICE:

HTML:

<!-- Body Content Is Here --> 
<div id="copyright-bg" class="container"> 
<div class="row"> 
<div class="twelvecol"> 
    <p class="copyright-text">Ipsum</p> 
</div> 
</div> 
</div> 

CSS:

html, body{ 
font-size:1em; 
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif; 
line-height:1.438em; 
color:#222; 
    margin: 0; 
    padding: 0; 
    text-align: justify; 
    background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); 
    /* Vendor Specific Background Gradients... */ 
} 

#copyright-bg{ 
margin-top:1.875em; 
background: none repeat scroll 0 0 #666666; 
    border-top: 5px solid #E31836; 
padding:1.250em; 
} 

.container { 
    padding-left: 20px; 
    padding-right: 20px; 
} 

.row { 
    width: 100%; 
    max-width: 1140px; 
    min-width: 755px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.row .twelvecol { 
    width: 100%; 
    float: left; 
} 

Answer 1

Se hai provato più soluzioni (come Ryan Fait's footer o CSS Sticky Footer (questo link è rotto, see this instead), che è il mio preferito), allora scommetterei che hai un problema più grande del valore nominale. Questi due esempi hanno dimostrato la prova del tempo e restano comunque i metodi più comunemente usati per creare un footer che si attacca al fondo della pagina. Mentre non sto criticando il tuo codice, ti suggerirei di ricreare da zero la pagina che stai creando e avere la prima implementazione come piè di pagina. Da lì dovresti solo essere in grado di copiare e incollare gli stili visivi e se si rovinano di nuovo, allora conosci la tua linea di codice colpevole.

EDIT:

avevo bisogno di modificare il codice un po 'perché la mancanza di rientro ha reso difficile la lettura. Here's the new jsFiddle. Quello che ho fatto cambiare sono state alcune cose. Ecco le aggiunte alla parte superiore del vostro codice CSS:

* {margin:0;padding:0;} 
html, body {height: 100%;} 

#content-wrap {min-height: 100%;} 

Quelle linee sono 100% necessario per rendere il vostro lavoro codice. Non solo è necessario eseguire un ripristino con caratteri jolly (*) su tutti gli elementi, ma è anche necessario comunicare al documento() e al corpo (body) di occupare l'intera altezza dello schermo. Non ricordo se fosse nel tuo CSS originale, ma lo #content-wrap dovrebbe avere anche il 100% di min-height.

Dopo aver cercato, mi rendo conto che il footer non è in realtà 180px in altezza, ma 100px in altezza. Here's the final jsFiddle. E anche, ecco il codice finale per rendere il bastone piè di pagina:

#main {overflow:auto; 
    padding-bottom: 100px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -100px; /* negative value of footer height */ 
    height: 100px; 
    clear:both;} 

Dovreste vedere adesso che quando si applica questo codice, i bastoni piè di pagina in fondo (e lo fa senza nastro adesivo). Spero che questo ti aiuti!

Answer 2

La maggior parte dei codici di sticky footer sembra causare problemi con la mia pagina. Per ovviare a questo problema Sto usando il seguente codice:

HTML

<body> 
<div id="page-content"> 
    <header> 
    <!-- Header Content Goes Here --> 
    </header> 

    <!-- Page Content Goes Here --> 

    <footer> 
    <!-- Footer Content Goes Here --> 
    </footer> 

</div> 
</body> 

JS

$(function() { 
    var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight()); 
$("#page-content").css("min-height",height+"px"); 
}); 

Quello che fa è calcolare l'altezza della pagina e imposta un'altezza minima per la pagina, in modo da attaccare il piè di pagina verso il basso. Funziona magnificamente.

Nota: sto usando HTML5.