#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    2
    Rep Power
    0

    [solved] 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); }     body > #wrap {height: auto; min-height: 100%;}  #main { padding-bottom: 116px; height:100%; }  /* must be same height as the footer */  #contentwrapper { margin: 0 auto; height:100%; min-height:100%;  }  #content { background-image:url(containerbg.jpg); background-repeat:repeat-y; margin: 0 auto; width:1000px; height:100%; min-height:100%;   }  #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>  <div id="contentwrapper"> <div id="content">   <p>Your website content here.</p>   </div>             </div>          </div>  </div>  <div id="footer"></div>  </body>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    2
    Rep Power
    0
    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>

IMN logo majestic logo threadwatch logo seochat tools logo