Ask Your Question
3

How do I make "ground" (the footer) always on the bottom?
 
   
  
 
 
On short pages, the "ground" element (the footer) hovers, and isn't right at the bottom. How can I fix this?
 
Edit: See screenshot below:
 
image description
 
 
To enter a block of code:
 
     
  • enter empty line after your previous text
    •  
  • paste or type the code
    •  
  • select the code and press the  button above
    •  
 
Preview: (hide)
  
 
 
 
 
 
 Joseph's avatar

      353
    
 
 
 
 Joseph 
 
 
    asked 12 years ago,
        
    updated 12 years ago 
 
 
 
 
        
 
 
 
Comments
 
 
 
 
  
 
 
 
I'm not sure you'd want it always at the bottom. What are you going to do when page is long?
 
 
 Evgeny's avatar Evgeny (12 years ago)   
 
 
  
 
 
  
 
 
 
When the page is long, it shouldn't show until you scroll down. :)
 
 
 Joseph's avatar Joseph (12 years ago)   
 
 
  
 
 
  
 
 
 
Yeah, that's ideal but harder to implement. We'll get to the adaptive design though - it's a must to support display in mobile devices.
 
 
 Evgeny's avatar Evgeny (12 years ago)   
 
 
  
 
  see more comments  
 
 
 
 
 
 1 Answer
  
  
  
 
 
 
 
1
 
 
  
 
 
 
 
 
 
Place this in the extra.css (found in askbot/media/style) as a quick, clean workaround to have a nice sticky footer:
 
html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#ground {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

 
 
To enter a block of code:
 
     
  • enter empty line after your previous text
    •  
  • paste or type the code
    •  
  • select the code and press the  button above
    •  
 
Preview: (hide)
  
 
 
 
 
 
 madaerodog's avatar

      11
    
 
 
 
 madaerodog 
 
 
    answered 10 years ago 
 
 
 
 
     link   
 
 
 
Comments
 
 
 
  see more comments