SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi AYCDesign. Welcome to the forums.

    Quote Originally Posted by AYCDesign View Post
    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
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •