I've been working on a Joomla 2.5 template that consists of three main sections: top, container, and footer. While trying to set the "container" section to have a minimum height of 100%, I faced various challenges which led me to use jQuery for assistance. The code I implemented is functioning properly, except for an issue where a white transparency covers the content below the initial view on pages requiring scrolling (everything beneath the scroll bar). An example of this can be observed at this link.
Here is the code:
Part 1: index.php
<?php
defined('_JEXEC') or die;
JHTML::_('behavior.framework', true);
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="../<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
//Initial load of page
$(document).ready(sizeContent);
//Every resize of window
$(window).resize(sizeContent);
function sizeContent(){
var contentHeight = $("#container").height();
var newHeight = $("html").height() - $("#top").height() - $("#footer").height();
if (contentHeight < newHeight){
$("#container").css("height", newHeight + "px");
}
}
</script>
</head>
<html>
<body>
<?php if($this->countModules('top')) : ?>
<div id="top">
<jdoc:include type="modules" name="top" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countModules('mnav')) : ?>
<div id="mnav">
<jdoc:include type="modules" name="mnav" style="none"/>
</div>
<?php endif; ?>
<div id="container">
<jdoc:include type="component" />
</div>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<jdoc:include type="modules" name="footer" style="none"/>
</div>
<?php endif; ?>
</body>
</html>
Part 2: default.css
/* ******************************************************************** */
/* Wire Frame */
/* ******************************************************************** */
html,body,div,span,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,label,input,textarea,p,th,td {
margin:0;
padding:0;
}
... (remaining CSS properties)