Advanced Search

Results 1 to 4 of 4

Thread: Extend Container for Short Pages Down to Footer

  1. #1
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default Extend Container for Short Pages Down to Footer

    I have a "container" into which all the webpage info (text, photos) is placed, that's centered within a "wrap" of a different color.
    The "wrap" extends the width of the whole webpage.

    On short pages, or pages that don't have a lot of information on them, the "wrap" / "wrap" color comes between the (bottom) end of the "container" and the "footer".

    Is there something I can place there, at the bottom of the "container" maybe, that will stretch it automatically to down all the way to the top of the "footer," so the color of the "wrap" doesn't come between them?

    I have thought of using many <br>'s to fill the page, but everyone's monitors are different sizes, so what will fit on the supertall monitors will end up being ridiculously long empty space on the shorter monitors.

    I hope this makes sense.


    Here is the css code:

    Code:
            html, body {
    		height: 100%;
    		margin: 0;
    		padding: 0;
    		}
    	 
    	#wrap {	
    		min-height: 100%;
       		height: auto !important;
        	        height: 100%;
        	        /* Negative indent footer by it's height */
        	        margin: 0 auto -60px;
    		}
    		
    	body {
    		background-color: #999;
    		margin: 0;
    		padding: 0;
    		border: 0;
    		font: 100%;
    		line-height: 1;
    	}
    
            /* This is the container */
           #content {
    		top: -28px;
    		clear both;
    		background: #eee;
    		overflow:auto; 
    		height: 100%;
    		padding-bottom: 85px;
    		}
    
             /* Same color as content container, to look continuous.*/
            #footer {
    		clear: both;
    		height: 60px;
    		background: #eee;
    		}
    Thanks!
    Last edited by questions; 06-07-2013 at 03:51 AM. Reason: Added code

  2. #2
    Join Date
    May 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Code:
    html{min-height:100%;position:relative}/* make sure it is at least as tall as the viewport */
    body{height:100%}
    #cloud-container{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        overflow:hidden;
        z-index:-1
    }
    you can do it like this.

    developerahusain
    Last edited by james438; 06-07-2013 at 04:26 AM.

  3. #3
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    I'm sorry, I don't understand.
    But I see it is the same advice given on this thread:
    http://stackoverflow.com/questions/7...00-page-height

  4. #4
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    What worked is to specify the html height this way, separate of the body or other heights.

    So I took out the height of body, the #wrap, and the #content.

    Code:
            html {min-height: 100%;}

Similar Threads

  1. Replies: 3
    Last Post: 04-16-2012, 03:53 PM
  2. Replies: 1
    Last Post: 12-10-2010, 02:32 AM
  3. Replies: 0
    Last Post: 08-31-2010, 02:19 AM
  4. Replies: 2
    Last Post: 08-10-2009, 12:45 AM
  5. Short Ajax help
    By BerlinerMC in forum JavaScript
    Replies: 0
    Last Post: 11-24-2006, 10:49 AM

Tags for this Thread

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
  •