1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Stretching the footer to the bottom of a browser

Discussion in 'CSS' started by qwikad.com, Oct 11, 2014.

  1. #1
    I'd like to make the footer stretch just to the bottom of a browser without going any farther. All browsers are different, so the footer's height needs to be flexible adjusting itself to this or that particular browser. The site: http://fastjobster.com

    Right now I have this:

    .footer {
    width: 100%;
    height: 150px;
    border-top: 1px solid #D9D9D9;
    background-color: #F0F0F0;
    font-size: 13px;
    color: #888888;
    padding: 20px 0px 0px 0px;
    margin: 140px 0px 0px 0px;
    }
    Code (markup):

    SEMrush
     
    qwikad.com, Oct 11, 2014 IP
    SEMrush
  2. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #2
    Try This
    
    .footer {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-top: 1px solid #D9D9D9;
    background-color: #F0F0F0;
    font-size: 13px;
    color: #888888;
    padding: 20px 0px 0px 0px;
    margin: 140px 0px 0px 0px;
    position: fixed;
    bottom: 0;
    }
    
    Code (markup):
     
    xXxpert, Oct 11, 2014 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,426
    Likes Received:
    1,380
    Best Answers:
    24
    Trophy Points:
    400
    #3
    No, it didn't do it. I don't want it to be position: fixed; but when I remove it there's a gap at the bottom of the browser and the footer.
     
    qwikad.com, Oct 11, 2014 IP
  4. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #4
    I don't see any gap between browser and footer, can u explain ?
     
    xXxpert, Oct 11, 2014 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,426
    Likes Received:
    1,380
    Best Answers:
    24
    Trophy Points:
    400
    #5
    I tested your solution and didn't work. So, I just went back to where I was before. What you see is the old CSS. The point is I don't need a fixed positioning. Do you know how to make it work without the fixed positioning?
     
    qwikad.com, Oct 11, 2014 IP
  6. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #6
    ok this is what i see.. how do u want it to be like ?
    Capture.jpg
     
    xXxpert, Oct 11, 2014 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,426
    Likes Received:
    1,380
    Best Answers:
    24
    Trophy Points:
    400
    #7
    I see. You see that scroll bar on the right? I want it to go away. But it will only be possible if the footer stretches its height just to the bottom of a browser. But the browsers are all different. I chose the height of 150px because it covered all browsers. But, ideally, I want the footer to stretch its height to any browser automatically. Basically, I want to get rid of that scroll bar on the index page for all browsers. Hope it makes sense.
     
    qwikad.com, Oct 11, 2014 IP
  8. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #8
    Okay,
    Try This if you want footer to be stacked at bottom on all big resolutions too..
    
    .footer {
    background-color: #f0f0f0;
    border-top: 1px solid #d9d9d9;
    bottom: 0;
    color: #888888;
    font-size: 13px;
    height: auto;
    margin: 140px 0 0;
    overflow: hidden;
    padding: 20px 0 0;
    position: absolute;
    width: 100%;
    }
    
    Code (markup):
    Or This if you don't want it to be overlapped on smaller screens
    
    .footer {
    background-color: #f0f0f0;
    border-top: 1px solid #d9d9d9;
    color: #888888;
    font-size: 13px;
    height: auto;
    margin: 140px 0 0;
    overflow: hidden;
    padding: 20px 0 0;
    width: 100%;
    }
    
    Code (markup):
     
    xXxpert, Oct 11, 2014 IP
  9. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #9
    If you dont want scrollbars then just add this to the css:
    body {overflow:hidden;}

    Might also need:
    html,body {height:100%}

    However expecting it to work correctly for ever browser is a fantasy. I doubt you get it consistent for even different version of the same browser, and different resolutions and user setting are going to break it more often ten it renders correct.

    Just because some rigid impractical layout works on your computer does not mean it will work correctly for anyone else even with massive scripting.

    Cd&
     
    COBOLdinosaur, Oct 12, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #10
    What you are looking for is called a 100% min-height layout. Thankfully it seems your footer is a fixed height, which makes doing this a lot easier.

    <div class="heightWrapper">
    	<p>
    		All your content EXCEPT the footer goes here
    	</p>
    <!-- .heightWrapper --></div>
    
    <div id="footer">
    	Footer Content here
    <!-- #footer --></div>
    Code (markup):
    html, body {
    	position:relative; /* help fix Opera and IE8 layout bugs */
    	height:100%;
    }
    
    .heightWrapper {
    	min-height:100%;
    	padding-bottom:150px; /* make room for the footer */
    }
    
    #footer {
    	margin-top:-150px;
    	height:150px;
    }
    Code (markup):
    You will also want to set a height:1% on some child element of .heightWrapper or IE8, Opera and some versions of Gecko based browsers to make it so that when the browser window is resized the layout changes with it.

    That will push the footer to the bottom if the content is shorter than the window, but push it off the bottom of the window if the content is taller.

    You can also do this using a table, but that's abusing the table element. The new Flex-box can also do this, and I consider it viable though a bit tricky to implement -- doesn't work in IE9/earlier, but I would be tempted to consider that an "Oh well" situation. I'm that way about most CSS3 things, some crappy older browser doesn't get rounded corners and drop shadows, OH WELL. If the visitor can still access the CONTENT, that's all that matters.
     
    Last edited: Oct 13, 2014
    deathshadow, Oct 13, 2014 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #11
    Oh, and if you want the code I posted to work in IE6 (if you care) just do:

    * html .heightWrapper { height:100%; }

    Being sure that .heightWrapper is not set to any sort of overflow condition. IE6/earlier incorrectly treats height as if it were min-height -- something IE7/newer and every other browser does not do.
     
    deathshadow, Oct 13, 2014 IP