All geek questions in one place

CSS Sticky Footer Margin

I DO NOT want the FIXED footer, I need the STICKY footer.

My sticky footer worked fine, but when the content is at a certain height, there is a difference between the footer and the bottom of the page.

Try using browser height and div content height, and you should see where the problem is.

It leaves an uncomfortable border between the footer and the bottom of the page.

Thanks in advance.

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

+6
source share
4 answers

Just add position: fixed; to your footer class in your css:

 #footer { background:#000; border-top:1px solid #00F0FF; clear:both; height:30px; margin-top:-30px; padding:5px 0; width:100%; position: fixed; /*add this new property*/ }

----- UPDATE -----

If you need a footer that is below, you will need two things:

 #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 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>
+4
source

Add position: fixed to the footer class. Please note that this does not work in some older versions of Internet Explorer. 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; }

See http://tagsoup.com/cookbook/css/fixed/ for an example of how to make it work in IE

+1
source

I had the same problem for centuries, and nothing seemed to work, then I realized that the spaces that I saw under my footer were not really a space, but the overflow from the footer with white text on white background. All I had to do was add:

 overflow:hidden

for my footer in my CSS.

If someone wants a solution that worked for me, then it will be the same as http://getbootstrap.com/2.3.2/examples/sticky-footer.html but with added overflow: hidden

0
source

DISPLAY TABLE = NO JS and NO fixed height!

Works in modern browsers (IE 8 +). I tested it in several browsers and it all seemed to work well.

I found this solution because I need a sticky footer with no fixed height and no JS. The code is below.

Explanation: Basically, you have a container div with 2 children: a wrapper and a footer. Put everything you need on the page (except the footer) in the wrapper. The container has a value of display: table; The shell is set to display: table-row; If you set html, body and wrapper to height: 100% , the footer will adhere to the bottom.

The footer is set to display: table; . This is necessary to get a stock of child items. You can also set the footer to display: table-row; This will not allow you to set margin-top in the footer. In this case, you need to become creative with more nested elements.

Solution: https://jsfiddle.net/0pzy0Ld1/15/

And with lots of content: 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>
0
source

Source: https://habr.com/ru/post/922376/

More articles:


All Articles