css - min-height:100% for content area, doesnt want to work!

**AYCDesign** · Nov 30, 2012 07:42

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.

1. The container my content is in will not expand to 100% height of its container.
2. 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:

Code:

<?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:

Code:

/* ******************************************************************** */ 
/* 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);
}

**ralph.m** · Nov 30, 2012 23:45

Hi AYCDesign. Welcome to the forums.

Originally Posted by AYCDesign

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.

There's only so much you can achieve with CSS, and this sounds a bit beyond its reaches to me. You can have a fixed footer with some tricky CSS, but flexible header and footer height is possibly asking too much. Just getting a sticky footer is tricky enough. Here is a guide for that:

http://www.sitepoint.com/forums/show...66#post1239966

User Tag List

Thread: css - min-height:100% for content area, doesnt want to work!

Thread Tools

Display

css - min-height:100% for content area, doesnt want to work!

Bookmarks

Bookmarks

Posting Permissions