Nail the footer to the floor

I have long wanted to do this (nail the “basement” to the floor) - whatever one may say, but “Copyright 2008” in the middle of the screen
does not look like a trump. There are articles on this subject, but I haven’t found any practical advice.
Even the guys from LayOut Gala do not bother themselves with this issue, although they are engaged in the most complete mysticism with negative fields, while receiving "rubber" of any kind. It was they who prompted me to use the negative margin (top margin) of the footer - thanks to them for that.

Let's get down to business. For those who have written in this life at least a couple of css codes, I independently advise you to skip the following explanations and see the code itself at the end of the page. To whom I am too lazy to understand myself, I will try to explain on the fingers what the matter is:

In the body tag we place a box (aka div, aka block) with a minimum height of 100%:
')
#container { min-height: 100% }

For ie6, we write a magic spell:
*html #container { height: expression(document.body.clientHeight > 50? "100%" :"50px"); }

Immediately under the “container” we push the “basement” with the height we need in pixels and assign it a margin-top equal to the height of the basement taken with a negative sign (let's say the height of our “basement” is 50px):

#footer { height: 50px; margin-top: -50px; background: #cccccc; }

If the content (text, photocock, and all that) is more than one screen, then it climbs onto the footer ( look ), so put the div (I called it an anti-footer) with a height equal to the height of the footer:

#antifooter { width: 50px; }
That's all.

What I want to add:

- do not forget about DOCTYPE:
- at the beginning of css you need to write the following: body, html {margin: 0; padding: 0; width: 100%; height: 100%; } (without it in some browsers height: 100% does not work).

ready code:

  <! doctype html public "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
	 <title> </ title>
	 <meta http-equiv = "content-type" content = "text / html; charset = windows-1251">
	 <meta http-equiv = "imagetoolbar" content = "no"> 
	 <style type = "text / css">
	            body, html {margin: 0;  padding: 0;  width: 100%;  height: 100%;  }
	            #container {width: 100%;  min-height: 100%;  }	   
		    #antifooter {width: 100%;  height: 50px;  }
		    #footer {
		                   width: 100%;  height: 50px; 
		                   margin-top: -50px; 
				   background: #ccccc; 
				  }
		  * html #container {height: expression (document.body.clientHeight> 100? "100%": "100px");  }
	 </ style> 
 </ head>
 <body>
     <div id = "container">
	                    Thi is the Small and Small Content
	  <div id = "antifooter"> </ div>
	 </ div>
	 <div id = "footer"> Text to this section </ div>
 </ body>
 </ html>

Testing here

In ie5, I didn’t check it, since my friends for the most part use the development of a company engaged in the fruit business, in other browsers everything works fine with any amount of content:

Opera .... +
FireFox .... +
Safari ....... +
IE .... +
NN ........... +

Thanks dmmd for helping to create the code.

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

All Articles

Nail the footer to the floor

More articles: