Finally, I'm ended up with the solution for my problem in a different way using twitter's
Bootstrap[
^] and some custom css. I used the following css:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px;
padding-top:40px;
}
.footer
{
position: relative;
margin-top: -150px;
height: 150px;
clear:both;
color:#fff;
}
@media (max-width: 767px) {
.footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
I have had to give
padding-top to the
main div to get fixed header and used twitter's responsive for the
.footer class.
You may refer to the below given jsfiddle demos and edits.
1.
Demo without content[
^] and
edit[
^]
2.
Demo with content[
^] and
edit[
^]
Credit goes to a blog post of Kevin M.
Kev @ MVC[
^].
However, I still feel that it's not a complete solution for this. Perhaps, what the solution if we get dynamic height footer? Suggestions and feedback are always welcome.
Ravi Mallya
--------------------
Coding is Poetry. Enjoying the beauty of coding...