how to Stick the footer div at the bottom?

Discussion in 'HTML & Website Design' started by Faqahat, May 16, 2015.

0
  1. #1
    Hello,
    I tried placing the Footer but its not Sticking to the bottom there is a space..

    [​IMG] 

    
#footerx 
{
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    position: absolute;
    bottom: 0px;
}
<div id="footerx">
 Los Santos Street Wars 2011-2015 ©
</div>
    Code (markup):
     
    Faqahat, May 16, 2015 IP
  2. billzo

    billzo Well-Known Member

    Messages:
    961
    Likes Received:
    278
    Best Answers:
    15
    Trophy Points:
    113
    #2
    billzo, May 16, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Only reason that would happen is if you have margin/padding on body (no, you shouldn't have), or you've placed the footerx-div inside a container which have a margin-bottom somewhere.
     
    PoPSiCLe, May 16, 2015 IP
  4. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #4
    edited
     
    KewL, May 20, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Absolute positioning for doing that is trash, that's NOT how you should be even THINKING about handling that.

    What you are trying to do is called a 100% min-height layout. Traditionally you'd have a container before the footer set to min-height:100% with a bottom padding equal to the footer's height, that you'd then use a negative margin to ride it up over the content.

    Nowadays I say "screw it working in IE9/earlier" and use flex-box to pull it off.

    html, body {
	height:100%; /* to allow for flex min-height */
}

body {
	display:-webkit-flexbox;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
}

#top {
	-webkit-flex:1 0 auto;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
}
    Code (markup):
    Where #top is a DIV wrapping everything except your footer. Makes #top auto-expand to force the footer flush with the bottom in IE10/newer.

    The old method is similar:
    html, body {
	position:relative; /* fix IE8 resize bug */
	height:100%;
}

#top {
	min-height:100%;
	padding-bottom:3.5em;
}

#footer {
	position:relative; /* make sure it depth sorts over #top */
	margin-top:-3.5em;
	padding:1em;
	line-height:1.5em; 
}
    Code (markup):
    But means you HAVE to know how tall that #footer element is going to be. It can also fail if you use EM in firefox depending on the font size since gecko is a retard about calculating the same values the same way twice -- which could mean switching to the inaccessible mess that is pixels and why I go with flex and say "Oh well" if it doesn't work in legacy IE.
     
    deathshadow, May 20, 2015 IP