CSS Sticky Footer Marge

Ich möchte nicht eine feste Fußzeile, ich brauche eine STICKY Fußzeile.CSS Sticky Footer Marge

Meine Haftnotiz funktionierte zuerst gut, aber wenn der Inhalt in einer bestimmten Höhe ist, gibt es einen Rand zwischen der Fußzeile und dem unteren Rand der Seite.

Versuchen Sie, mit der Browser-Höhe und Content-Div-Höhe zu verwirren, und Sie sollten sehen, wo das Problem liegt.

Es bleibt ein unangenehmer Rand zwischen der Fußzeile und dem unteren Rand der Seite.

Vielen Dank im Voraus.

CSS-Code:

html, body { 
    height:100%; 
    margin:0; 
} 
body { 
    color:#FFF; 
    font:16px Tahoma, sans-serif; 
    text-align:center; 
} 
a { 
    text-decoration:none; 
} 
#wrapper { 
    height:100%; 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
} 
#content { 
    background:#F00; 
    height:950px; 
} 
#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
} 
#footer span { 
    color:#FFF; 
    font-size:16px; 
    padding-right:10px; 
} 
#push { 
    clear:both; 
    height:30px; 
}

HTML-Code:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Bad Footer</title> 
     <link rel="stylesheet" href="badfooter.css" type="text/css"> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <a href=""><span>About Us</span></a> 
     <span> | </span> 
     <a href=""><span>Contact Us</span></a> 
     <span> | </span> 
     <a href=""><span>Home</span></a> 
    </div> 
</body>

Quelle

2012-08-08 Connor

Fügen Sie einfach position: fixed; auf Ihre footer Klasse in Ihrem CSS:

----- UPDATE -----

Wenn Sie eine Fußzeile müssen, die an der Unterseite bleibt müssen Sie zwei Dinge:

#wrapper { 
    /*height:100%;*/ /*you need to comment this height*/ 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
    position: relative; /*and you need to add this */ 
} 

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: relative; /*use relative position*/ 
}

#wrapper { 
 
    /*height:100%;*/ /*you need to comment this height*/ 
 
    margin: 0 auto; 
 
    min-height: 100%; 
 
    min-height: 700px; /* only for Demo purposes */ 
 
    padding-bottom: -30px; 
 
    width: 985px; 
 
    position: relative; /*and you need to add this */ 
 
} 
 
#footer { 
 
    background: #000; 
 
    border-top: 1px solid #00F0FF; 
 
    height: 30px; 
 
    margin-top: -30px; 
 
    padding: 5px 0; 
 
    width: 100%; 
 
    position: relative; /*use relative position*/ 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
    <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
 
    </div> 
 
    <div id="push"></div> 
 
</div> 
 
<div id="footer"> 
 
    <a href=""><span>About Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Contact Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Home</span></a> 
 
</div>

Quelle

2012-08-08 15:47:46 Luis

Einstellung Position fixiert ist kein klebriges Fußzeile ... fixiert bedeutet, es wird bleibe immer unten (trotz Scrollen). Sticky Footers auf der anderen Seite sind viel komplizierter. Wenn Sie scrollen, müssen Sie einen Bildlauf durchführen, um die Fußzeile zu sehen, ansonsten bleibt s unten. – Connor

@Connor überprüfen Sie das Update in der Antwort – Luis

Das schien den Trick zu tun! Vielen Dank. – Connor

Fügen Sie der Fußzeilenklasse position: fixed hinzu. Beachten Sie, dass es in bestimmten alten Versionen von Internet Explorer nicht funktioniert. http://jsfiddle.net/kAQyK/

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
}

Siehe http://tagsoup.com/cookbook/css/fixed/ für Beispiele, wie es auch im Internet Explorer arbeiten machen

Quelle

2012-08-08 15:48:32 Samuel

SCHLÜSSELWÖRTER: KLEINER FUSS. Die Position auf "fixed" zu setzen ist kein "sticky footer" ... fixed bedeutet, dass sie immer auf dem Boden bleibt (trotz Scrolling). Sticky Footers auf der anderen Seite sind viel komplizierter. Wenn Sie scrollen, müssen Sie einen Bildlauf durchführen, um die Fußzeile zu sehen, ansonsten bleibt s unten. – Connor

Ich war für Alter und nichts das gleiche Problem haben schien dann zu arbeiten, erkannte ich, dass das Leerzeichen ich unter meiner Fußzeile zu sehen war, war nicht wirklich Whitespace überhaupt, aber der Überlauf von meiner Fußzeile mit weißem Text auf weißem Hintergrund. Alles, was ich tun musste, war hinzuzufügen:

overflow:hidden

zu meiner Fußzeile in meinem css.

Wenn jemand die Lösung will die für mich gearbeitet, dann ist es die gleiche wie http://getbootstrap.com/2.3.2/examples/sticky-footer.html aber mit dem zusätzlichen overflow: hidden

Quelle

2014-07-07 01:34:19 Dominic

DISPLAY TABLE = NO JS und keine feste Höhe!

Funktioniert in modernen Browsern (IE 8 +) - Ich habe es in mehreren Browsern getestet und es schien alles gut zu funktionieren.

Ich habe diese Lösung gefunden, weil ich eine klebrige Fußzeile ohne feste Höhe und ohne JS brauchte. Code ist unten.

Erklärung: Im Grunde haben Sie ein Container-Div mit 2 Kind-Elemente: ein Wrapper und eine Fußzeile. Legen Sie alles auf der Seite (außer der Fußzeile) in den Wrapper. Der Container ist auf display: table; festgelegt. Der Wrapper ist auf display: table-row; festgelegt. Wenn Sie HTML, Body und Wrapper auf height: 100% festlegen, bleibt die Fußzeile an der Unterseite.

Die Fußzeile ist ebenfalls auf display: table; eingestellt. Dies ist notwendig, um den Spielraum von Kindelementen zu erhalten. Sie können die Fußzeile auch auf display: table-row; einstellen. Dadurch können Sie margin-top nicht auf der Fußzeile festlegen. Sie müssen in diesem Fall mit mehr verschachtelten Elementen kreativ werden.

Die Lösung:https://jsfiddle.net/0pzy0Ld1/15/

Und mit mehr Inhalt:http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body, 
 
#container, 
 
#wrapper { 
 
    height: 100%; 
 
} 
 
#container, 
 
#wrapper, 
 
#footer { 
 
    width: 100%; 
 
} 
 
#container, 
 
#footer { 
 
    display: table; 
 
} 
 
#wrapper { 
 
    display: table-row; 
 
} 
 
/* THIS IS JUST DECORATIVE STYLING */ 
 

 
html { 
 
    font-family: sans-serif; 
 
} 
 
#header, 
 
#footer { 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
} 
 
#header { 
 
    padding: 1em; 
 
} 
 
#content { 
 
    background: orange; 
 
    padding: 1em; 
 
} 
 
#footer { 
 
    margin-top: 1em; /* only possible if footer has display: table !*/ 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     HEADER 
 
    </div> 
 
    <div id="content"> 
 
     CONTENT 
 
     <br> 
 
     <br>some more content 
 
     <br> 
 
     <br>even more content 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> 
 
     FOOTER 
 
    </p> 
 
    <br> 
 
    <br> 
 
    <p> 
 
     MORE FOOTER 
 
    </p> 
 
    </div> 
 
</div>

Quelle

2016-02-08 16:55:38

Antwort

Verwandte Themen