I am working on a template right now @ http://development.aycdesign.net/skin , and have been stuck on this for days and google has been no friend on this issue. What I am trying to accomplish is to have a variable size header, variable size footer, and always have the content container a minimum of 100% of the browser window size. I’ve tried just about everything under the sun, and get two problems.
- The container my content is in will not expand to 100% height of its container.
- On pages that have to scroll, a portion of the content are is clipping into the footer.
Any suggestions on this would be greatly appreciated so that i can get this resolved and move on!
The html:
<?php
defined('_JEXEC') or die;
JHTML::_('behavior.framework', true);
$app = JFactory::getApplication();
$frontpageLayout = $this->params->get('frontpageLayout');
?>
<!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>
<!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
<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" />
<meta http-equiv="x-ua-compatible" content="IE=8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<html>
<body>
<div id="wrapper">
<?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="pagewidth">
<?php if($this->countModules('left')) : ?>
<div id="leftcol">
<jdoc:include type="modules" name="left" style="none"/>
</div>
<?php endif; ?>
<div id="maincol">
<jdoc:include type="component" />
</div>
<?php if($this->countModules('right')) : ?>
<div id="rightcol">
<jdoc:include type="modules" name="right" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countModules('user1')) : ?>
<div id="user1">
<jdoc:include type="modules" name="user1" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<div id="user2">
<jdoc:include type="modules" name="user2" style="none"/>
</div>
<?php endif; ?>
<?php if($this->countModules('user3')) : ?>
<div id="user3">
<jdoc:include type="modules" name="user3" style="none"/>
</div>
<?php endif; ?>
</div>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<jdoc:include type="modules" name="footer" style="none "/>
</div>
<?php endif; ?>
</div>
</body>
</html>
…and the css:
/* ******************************************************************** */
/* HTML Reset */
/* ******************************************************************** */
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;
}
html,body {
height:100%;
background: rgb(138, 126, 102);
color: #A5A56F;
font-family: arial, sans-serif;
font-size: .9em;
line-height: 1.25;
}
/* ******************************************************************** */
/* Wireframe Elements */
/* ******************************************************************** */
#wrapper {
position: relative;
height:auto !important;
height:100%;
min-height:100%;
}
#top {
background: rgb(0, 0, 0);
width: 100%;
}
#top .custom {
width: 80%;
margin: 0 auto 0 auto;
color: #fff;
text-align: right;
padding: .5em 0 .5em;
}
#pagewidth {
width: 80%;
min-height: 100%;
background: rgba(54, 54, 54, 0.5);
text-align: left;
margin: 0 auto;
padding-bottom: 3em;
overflow: hidden;
}
/*#leftcol {
float: left;
position: relative;
}
#rightcol {
float: right;
position: relative;
}
#maincol {
float: left;
position: relative;
}
#user1 {
float: left;
width: 29%;
height: 200px;
margin-right: 4%;
}
#user2 {
float: left;
width: 29%;
height: 200px;
}
#user3 {
float: right;
width: 29%;
height: 200px;
}*/
#footer {
background: rgb(0, 0, 0);
width: 100%;
height: 5%;
position: absolute;
bottom: 0;
}
#footer .custom {
width: 80%;
margin: 0 auto;
color: #fff;
text-align: right;
padding: .5em 0 .5em 0;
}
/* ******************************************************************** */
/* HTML Elements */
/* ******************************************************************** */
a, a:visited, a:hover {
color: #F9AF43;
text-decoration: underline;
}
a img {
border: none;
}
li {
margin-left: 0;
margin-bottom: 15px;
list-style: none;
}
h1, h2, h3 h4 {
margin-bottom: 5px;
font-family: arial, verdana, sans-serif;
}
h1 {font-size: 1.6em;} h2 {font-size: 1.5em;} h3 {font-size: 1.1em;} h4 {font-size: 1.0em;}
fieldset
{
border: none;
}
input {
padding: 5px;
margin: 0 0 10px 10px;
border: none;
}
input.default {
padding: 5px;
border: none;
background: #836A34;
color: #A5A56F;
}
input.button {
padding: 5px;
border: none;
background: #836A34;
color: #A5A56F;
}
select {
background: #836A34;
color: #A5A56F;
border: none;
margin: 4px 0 4px 0;
padding: 3px;
}
.search label {
display: none;
}
/* ******************************************************************** */
/* Joomla Elements */
/* ******************************************************************** */
.blog-featured h1,
.item-page h1 {
display: none;
}
ul.actions li {
list-style: none;
display: inline;
padding: 5px;
}
.item-page,
.items-leading,
.item.column-1,
.item.column-2,
.item.column-3,
.contentpaneopen {
padding-top: 13em;
}
.items-more {
margin-left: 20px;
}
.items-more ol {
padding-bottom: 10px;
}
.items-more li {
display: inline;
padding-right: 5px;
}
.pagination {
margin-left: 20px;
margin-bottom: 10px;
}
.pagination-start {
margin-left: -10px;
}
.pagination li{
display: inline;
padding: 0 10px;
}
.counter {
margin-bottom: 5px;
}
.category-module li {
margin-bottom: 5px;
}
.moduletable {
padding: 10px;
}
/* ******************************************************************** */
/* Joomla Blog Elements */
/* ******************************************************************** */
.cols-1 {
display: block;
float: none !important;
margin: 0 !important;
}
.cols-2 .column-1 {
float: left;
width: 45%;
}
.cols-2 .column-2 {
float: right;
margin: 0;
width: 45%;
}
.cols-3 .column-1 {
float: left;
margin-right: 4%;
width: 28%;
}
.cols-3 .column-2 {
float: left;
margin-left: 0;
width: 28%;
}
.cols-3 .column-3 {
float: right;
width: 28%;
}
.items-row {
margin-bottom: 0px !important;
overflow: hidden;
}
.column-1, .column-2, .column-3 {
overflow: visible;
}
.column-2 {
margin-left: 40%;
width: 55%;
}
.column-3 {
width: 30%;
}
.blog-more {
padding: 10px 5px;
}
/* ******************************************************************** */
/* Main Menu */
/* ******************************************************************** */
#mnav .moduletable {
margin: 0;
padding: 0;
}
#mnav {
width: 100%;
padding: .5em 0 .5em 0;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 3.5em;
z-index: 1000;
}
#mnav ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
#mnav ul li:first-child {
margin: 0;
padding: 0;
}
#mnav ul li {
margin-top: 3.5em;
list-style: none;
float: left;
position: relative;
}
#mnav ul li a {
display: block;
padding: 0 1em;
color: rgb(17, 17, 20);
font-size: 1.1em;
text-decoration: none;
text-transform: uppercase;
}
#mnav ul li a:hover {
color: rgb(207,63,87);
}
#mnav ul li ul {
position: absolute;
left: -1999em;
}
#mnav ul li:hover ul,
#menu ul li.parent ul {
left: 0;
}
#mnav ul li ul li {
width: 20em;
margin: 0;
}
#mnav ul li:hover ul li {
background: none;
}
#mnav ul li:hover ul li a,
#mnav ul li ul li a {
margin-top: .1em;
margin-bottom: .1em;
background: rgba(255,255,255,0.5);
padding: .7em 1em .7em 1em;
font-size: .8em;
}
#mnav ul li ul li a:hover,
#mnav ul li.active ul li a:hover {
color: rgb(207,63,87);
}