EDIT 2:

In meinem Code ist ein Fehler aufgetreten, der dazu geführt hat, dass die Fußzeile nicht am unteren Rand der Seite angehalten hat. Mein Code sah ungefähr so ​​aus:

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

Ich entfernte<div id="footer"> und verschob diese CSS-Eigenschaften nachid="copyright-bg" und dann fing es an, richtig am Boden zu kleben. Aber jetzt ist ein anderes Problem aufgetaucht! Ich habe jetzt unnötige Bildlaufleisten!Hier ist eine Geige Das hat den geringsten Code, um herauszufinden, was los ist. Ich dachte, es könnte der Farbverlauf sein, aber als ich den Code auf einen soliden Hintergrund änderte, erschienen die Bildlaufleisten immer noch.

Hinweis: Ich habe in Chrome und Firefox getestet.

BEARBEITEN:

Ich habe versucht, die zu verwendenCSS Sticky Footer gemäß Anleitung auf derWebseite.

Ich gehe davon aus, dass ein Konflikt in meinem CSS vorliegt (?)Hier ist eine Geige der Seite.

Ich habe auch versucht wasDiese Website vorgeschlagen und während es technisch funktioniert, erstellt es Bildlaufleisten! Das möchte ich nach Möglichkeit vermeiden.

Ursprüngliche Frage

Ich arbeite an einer Seite und wenn die Seite nicht viel Inhalt hat (dh keine Bildlaufleisten für die Seite), verbleibt ein schwarzer Balken unter meinem Copyright-Container.

Hier ist ein Screenshot:

Hinweis: Wo Sie das Wort sehenDone Ist der untere Rand meines Browsers, zeigt ein Pfeil auf den schwarzen Balken.

Ich habe ein paar Dinge versucht, um die Bar zu entfernen. Wenn ich hinzufügeheight: 100%; Für das Body-Tag wird mein Hintergrund-Farbverlauf verwendet und es wird bis zum Ende der Seite reichen, aber auch das sieht nicht gut aus. Ich habe dann versucht, hinzuzufügenheight: 100% zum Copyright-Container. Dies führte dazu, dass sich der graue Bereich weit nach unten streckte und übermäßige Leerzeichen und Bildlaufleisten verursachte. Ich habe versucht, das Element absolut zu positionieren, aber das verursacht einige andere Probleme und würde es vorziehen, die Positionierung absolut zu vermeiden.

Wie entferne ich den schwarzen Balken? (Vorzugsweise nur mit CSS, akzeptiert aber eine Antwort, die jQuery / Javascript verwendet.)

CODE:

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