Adhesive footer with non-fixed height Css + Javascript

In response to a comment from a post about a sticking footer.

... a big drawback - fixed height ...

I give an example of correcting this shortcoming.

Html is no different

< div id = "wrap" >
< div id = "main" >
If User Calls <br>
then be squabbled; <br>
If spam in Outlook crashed early, <br>
Then colleagues miss today, <br>
And users do not bother them. <br>
< / div >
< / div >

< div id = "footer" >
When it's still half a century before dinner <br>
Loop my keyboard knocks endlessly, <br>
Mouse clicks silence breathing <br>
The monitor is frozen attention. <br>
Personal life turns into codes <br>
In thoughts only WORK, WORK. <br>
If at leisure without sleep and care <br>
I want to hurry to work again, <br>
Then the software virus has taken you <br>
And there is no fight of desire and strength, <br>
And urgently, I don’t forget to say: <br>
End if; <br>
End loop; <br>
End if; <br>
End if;
< / div >

Css code

* {
margin : 0 ;
padding : 0 ;
/ * You can refrain from commenting on such a reset of styles,
in the example it is easier to show like this *
}
')
html , body {
height : 100 % ;
}

#wrap {
position : relative ;
min-height : 100 % ;
background-color : #ccc ;
}

* html #wrap {
height : 100 % ;
/ * Take out the styles for IE to a separate file or do it as you like,
here everything is mixed up for clarity * /
}

#main {
/ * css * /
}

#footer {
position : relative ;
background-color : # dcd8cb ;
zoom : 1 ; / * Solves some problems in IE6-7, in particular the problem with the display of bg-color * /
}

Javascript fixing a problem with fixed footer

function resize ( ) {
var foot = document. getElementById ( 'footer' ) ;
var footHeight = foot. offsetHeight ;
foot. style . marginTop = - footHeight + "px" ;
document. getElementById ( 'main' ) . style . paddingBottom = footHeight + "px" ;
}

window. onload = resize ;

, , .

And of course, it is necessary to provide an option if javascript is disabled. This one seems more convenient to me:

<noscript >
<style type = "text / css" >
#main {
padding-bottom : 80px ;
}

#footer {
min-height : 80px ;
margin-top : -80px ;
}

* html #footer {
height : 80px ;
}
</ style >
</ noscript >

Download example (1.18 KB)
This is just a demonstration of how you can make quite a bit of torment. How do you - your personal right.

_________________________
A great example that will work in browsers that understand the display property: table-row; by SelenIT