Sticky footer in Liferay 6.2

Question

How to create sticky footer in Liferay? I've read a lot of docs but all of them haven't worked.

I have this in custom.css

#footer {
     background-color: black;
     color: white; 
     font-size: 200%; 
     text-align: center; 
     line-height: 3em; 
     clear: both;
     position: relative; 
     z-index: 10; 
     height: 3em;
     margin-top: -3em;
}

and this in portal_normal.vm:

<div id="footer">Powered by German</div>

In mentioned previous question I asked how to create footer and change it color. Then, in the comment, I asked how to create sticky footer and got no good answer, so I created another thread.

Answer 1

Ok, I solved my problem!!!

First of all, you should look at this line: <div class="container-fluid" id="wrapper"> in portlet_normal.vm:

Our footer into this category, so that every time will be not in the end of browser page but in the end of this block. So you need to close that block and place footer below:

<div id="footer" class="row-fluid">
    <div class="span12 text-center">
        <p class="powered-by">
            #language ("Powered by Alexandr Boldyrev")
        </p>
    </div>
</div>

And then, you should change footer's parameter in custom.css:

#footer {
     text-align: center;
     background: #FFEFD5;
     position: absolute;
     bottom: 0;
}

That is it, our footer becomes sticky!