Stick-Footer Zum Ende der Seite ohne (unnötige) Bildlaufleisten

Question

EDIT 2:

Es gab einen Fehler in meinem Code, der die Fußzeile verursacht wurde nicht auf die unten auf der Seite zu bleiben. Mein Code sah etwa 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> 

I <div id="footer"> entfernt und bewegt diese CSS-Eigenschaften zu id="copyright-bg" und es begann dann richtig auf den Boden zu kleben. Aber jetzt ist ein anderes Thema aufgetaucht! Ich habe jetzt unnötige Bildlaufleisten! , die den geringsten Code hat, um herauszufinden, was vor sich geht. Ich dachte, dass es der Gradient sein könnte, aber als ich den Code zu einem festen Hintergrund änderte, erschienen die Rollbalken immer noch.

Hinweis: Ich habe in Chrome und Firefox getestet.

EDIT:

Ich habe die CSS Sticky Footer gemäß den Anweisungen auf dem website zu verwenden versucht.

Ich nehme an, dass es einen Konflikt in meinem CSS (?) here is a Fiddle der Seite gibt.

Ich habe auch versucht, was this website suggested und während es technisch funktioniert erstellt Scrollbars! Das möchte ich möglichst vermeiden.

Original Question

ich auf einer Seite arbeite und wenn die Seite nicht viel Inhalt (IE keine Scrollbalken für die Seite) hat ich mit einem schwarzen Balken unter meinem Copyright Behälter bin übrig geblieben. Hier

ist ein Screenshot:

Hinweis: Wo Sie das Wort sehen Done die Unterseite meines Browsers ist, wird ein Pfeil auf dem schwarzen Balken zeigen.

Ich habe ein paar Dinge versucht, um die Leiste zu entfernen. Wenn ich das Body-Tag mit height: 100%; ausfülle, wird es meinen Hintergrund-Verlauf nehmen und es wird bis zum Ende der Seite reichen, aber das sieht nicht gut aus. Ich habe dann versucht, height: 100% dem Copyright-Container hinzuzufügen. Das hat dazu geführt, dass sich die graue Fläche weit nach unten erstreckt und übermäßig viel Platz und Bildlaufleisten verursacht. Ich habe versucht, das Element absolut zu positionieren, aber das verursacht mehrere andere Probleme und würde es vorziehen, die Positionierung absolut zu vermeiden.

Wie entferne ich den schwarzen Balken?(Vorzugsweise mit nur CSS, aber eine Antwort akzeptieren, 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; 
} 

Answer 1

Wenn Sie mehrere Lösungen versucht haben (wie Ryan Fait's footer oder die CSS Sticky Footer (dieser Link ist gebrochen, see this instead), das ist mein Favorit) dann würde ich wetten, dass Sie ein größeres Problem als Nennwert haben. Diese beiden Beispiele haben den Test der Zeit bewährt und doch immer noch die am häufigsten verwendeten Methoden bleiben für eine Fußzeile zu schaffen, die an der Unterseite der Seite klebt. Während ich Ihren Code nicht bashing, würde ich vorschlagen, dass vielleicht wiederholen Sie die Seite, die Sie von Grund auf neu sind die Erstellung und haben die erste Implementierung der klebrige Fußzeile sein. Von dort sollten Sie nur in der Lage sein, Ihre visuellen Stile zu kopieren und einzufügen, und wenn es wieder versaut, dann kennen Sie Ihre Täter-Codezeile.

EDIT:

I benötigt, um Ihren Code ein wenig, weil der Mangel an Vertiefung bearbeiten machte es schwierig zu lesen. Here's the new jsFiddle. Was ich geändert habe, waren ein paar Dinge. Hier sind die Ergänzungen zu der Spitze Ihres CSS-Codes:

Diese Zeilen sind 100% notwendig, damit Ihr Code funktioniert. Nicht nur, benötigen Sie einen Platzhalter tun (*) zurückgesetzt auf alle Elemente, aber Sie müssen auch das Dokument sagen (html) und den Körper (body) über die gesamte Höhe des Bildschirms aufzunehmen. Ich erinnere mich nicht, ob es in Ihrem ursprünglichen CSS, aber #content-wrap sollte auch eine min-height von 100% aufweist.

Nach der Suche durch, merke ich, Ihre Fußzeile nicht tatsächlich 180px in der Höhe, sondern 100px in der Höhe. Here's the final jsFiddle. Und auch hier ist der endgültige Code den Footer-Stick zu machen:

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

Sie jetzt sehen sollen, dass, wenn diesen Codes, die Fußzeile-Sticks auf den Boden (und zwar ohne Klebeband). Hoffe das hilft!

Answer 2

Mehrheit der klebrigen Fußzeile Codes scheinen Probleme mit meiner Seite zu verursachen. Ich verwende den folgenden Code, um dieses Problem zu umgehen:

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

Was das bedeutet ist die Höhe der Seite berechnen und legen Sie eine Mindesthöhe für die Seite fest, so dass die Fußzeile unten bleibt. Es funktioniert wunderbar.

Hinweis: Ich verwende HTML5.