The first step is to create a block called "foot" which is essentially the same as "head" but you'll output it in a different spot. You can add this to your
<block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>
Now you can add JS/CSS (although CSS in the footer is not recommended) using this command in any of your XML files:
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
In your page template files (e.g.
page/1column.phtml) you'll need to output this block before the closing body tag:
<?php echo $this->getChildHtml('foot') ?>
If you're using the default Magento templates you will get JS errors. Take the mini search form for example (
catalogsearch/form.mini.phtml). It has this inline script:
var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
This will be called as soon as it loads, as it's not in any document ready handler. Varien doesn't exist yet because it's in the footer, so you get an error. You can fix this by adding a document ready handler or by moving all inline JS of this nature to an external file that is also loaded in the footer. Problems like this will occur throughout the site, particularly in the checkout and configurable product pages.
The other problem you might encounter is if you're using jQuery alongside Prototype in noConflict mode. You'll need to ensure jQuery is loaded before Prototype so no conflicts happen.