EDYCJA 2:

W moim kodzie wystąpił błąd, który powodował, że stopka nie przykleiła się do dołu strony. Mój kod wyglądał mniej więcej tak:

<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>

usunąłem<div id="footer"> i przeniósł te właściwości CSS doid="copyright-bg" i wtedy zaczęło się odpowiednio trzymać na dnie. Ale teraz pojawił się kolejny problem! Mam teraz niepotrzebne paski przewijania!Oto skrzypce ma najrzadszy kod, który próbuje określić, co się dzieje. Myślałem, że to może być gradient, ale kiedy zmieniłem kod na solidne tło, paski przewijania nadal się pojawiają.

Uwaga: testowałem w Chrome i Firefox.

EDYTOWAĆ:

Próbowałem użyćCSS Sticky Footer według instrukcji na stroniestronie internetowej.

Zakładam, że w moim CSS występuje konflikt?oto skrzypce strony.

Próbowałem też cota strona zasugerowała i chociaż technicznie działa, tworzy paski przewijania! Chciałbym tego uniknąć, jeśli to możliwe.

Pytanie oryginalne

Pracuję nad stroną i jeśli strona nie ma dużo zawartości (IE bez pasków przewijania na stronie), pozostawiam czarny pasek pod moim kontenerem z prawami autorskimi.

Oto zrzut ekranu:

Uwaga: Gdzie widzisz słowoDone jest na dole mojej przeglądarki, strzałka wskazuje na czarny pasek.

Próbowałem kilka rzeczy, aby usunąć pasek. Kiedy dodamheight: 100%; do tagu body będzie pobierany mój gradient tła i dotrze on do dołu strony, ale znowu nie wygląda dobrze. Następnie próbowałem dodaćheight: 100% do kontenera praw autorskich. To spowodowało, że szary obszar rozciągnął się w dół i spowodował nadmierną pustą przestrzeń i paski przewijania. Próbowałem umieścić element absolutnie, ale powoduje to kilka innych problemów i wolałbym unikać pozycjonowania absolutnie.

Jak usunąć czarny pasek? (Najlepiej z CSS, ale zaakceptuje odpowiedź, która używa jQuery / Javascript)

KOD:

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;
 }