Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% Strech Div with a Sticky Footer

    Currently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks!

    CSS:
    Code:
    * { margin:0; padding:0; } 
    
    
    
    html, body, #wrap { height: 100%; min-height:100%;
    
    /* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
    /* and http://www.puremango.co.uk/2010/04/css-gradient/ */
    /* fallback (Opera) */
    background: #8cb6e9;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #8cb6e9, #e0effc);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
    left top, left bottom, from(#8cb6e9), to(#e0effc));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0);
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    } 
    
    
    
    body > #wrap {height: auto; min-height: 100%;}
    
    #main { padding-bottom: 116px; height:100%; }  /* must be same height as the footer */
    
    #contentwrapper {
    background-image:url(layout/containerbg.jpg);
    background-repeat:repeat-y;
    margin: 0 auto;
    width:1000px;
    height:100%;
    min-height:100%;
    }
    
    #content {
    padding:15px;
    
    
    }
    
    #footer {
    position: relative;
    margin-top: -116px; /* negative value of footer height */
    height: 116px;
    background-image:url(layout/footer.png);
    width:100%;
    background-position:center;
    clear:both;
    } 
    
    /* CLEAR FIX*/
    .clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    HTML:
    Code:
    <body>
    
    
    
    
    <div id="wrap">
    
        <div id="main" class="clearfix">
    
            <div id="contentwrapper">
                <div id="content">
                    <div id="text">
                        <p>Your website content here.</p> 
                    </div> <!--end text div-->
               
                    <div id="sidead">
                      
                    </div> <!--end sidead-->
                    <div class="clear"></div>
                </div> <!--end class content-->
            </div><!--end contentwrapper-->
        
        </div> <!--end main -->
    
    </div> <!--end wrap-->
    
    <div id="footer"></div>
    
    </body>

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what is the approx. size of your background image?

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's about 2000px, but it's set up so that it's centered and any excess just doesn't show unless you expand the window.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello carleihar,
    With a full-height layout you get one element that makes it the full height. In this case it's #wrap.
    #main can only be the height of it's content.

    I see you have no background image on #wrap so you may be able to repeat-y and center the image there?

    Since this is really an image based question, a link to the test site would really help with debugging.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out, thanks everyone! Ending code:

    Code:
    * {margin:0;padding:0;} 
    
    /* must declare 0 margins on everything, also for main layout components use padding, not 
    vertical margins (top and bottom) to add spacing, else those margins get added to total height 
    and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
    
    html {
    background: #e0effc;
    }
    
    body {
    
    height: 100%; 
    min-height:100%;
    
       
     background-repeat: no-repeat;
        background: #e0effc;
        background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc));
        background: -moz-linear-gradient(top,  #8cb6e9,  #e0effc);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb6e9', endColorstr='#e0effc');
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    
    
    
    }
    
    #wrap {
    min-height: 100%;
    margin: 0 auto;
    width:1000px;
    
    
    
     }
    
    
    
    #main {overflow:auto;
    	padding-bottom: 116px;
    	height: 100%;
    	min-height: 100%;
    	background-color:#FFFFFF;
    border-right:1px solid #a89d6d;
    border-left:1px solid #a89d6d;
    	}  /* must be same height as the footer */
    
    #footer {position: relative;
    	margin-top: -116px; /* negative value of footer height */
    	height: 116px;
    	clear:both;
    	
    background-image:url(layout/footer.png);
    width:100%;
    background-position:center;
    	
    	
    	} 
    
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    
    
    
    /* IMPORTANT
    
    You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
    
    <!--[if !IE 7]>
    	<style type="text/css">
    		#wrap {display:table;height:100%}
    	</style>
    <![endif]-->
    
    */
    
    
    #contentwrapper {
    
    
    height:100%;
    min-height:100%;
    }

    Code:
    <body>
    
    
    
    <div id="wrap">
    
    	<div id="main">
        
        
    
            
        
        <div id="contentwrapper">
          <div id="content">
                    <div id="text">
                        <p>Your website content here.</p> 
                    </div> <!--end text div-->
               
                   
                </div> <!--end content-->
        </div> <!--END CONTENTWRAPPER-->
    
    	</div> <!--END MAIN-->
    
    </div> <!--END WRAP-->
    
            
         
    
    <div id="footer"></div>
    
    </body>


  •  

    Posting Permissions

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