Implementing a sticky footer in Orchard CMS - customization

Question

Can somebody please explain how a sticky footer:
<div id="container....
...content
</div>
<div id="footer"....
</div>
CSS:
#container
{
height: 100%;
margin-bottom: -height of footer
}
might be implemented in Orchard CMS?
The problem I can't manage is to envelop some main content layouts in a wrapper.
Currently I have:
<div id="aside-1 ...
<div id="layout-navigation
<div id="layout-main-container
<div id="layout-footer
So main problem is to customize layouts rendering.

Answer 1

In your Layout.cshtml file, use the Display method to render zones. The primary zone where content gets rendered is the Content zone, which you render like this:
<div id="container....
#Display(Model.Content)
</div>
<div id="footer"....
</div>
You can also define your own custom zones (via your Theme.txt manifest file).
For example, in your Theme.txt file, define a Footer zone like this:
Zones: Content, Footer
Then in Layout.cshtml, render that zone like this:
<div id="container....
#Display(Model.Content)
</div>
<div id="footer"....
#Display(Model.Footer)
</div>
You have complete freedom on how you want to layout content.