-1

This is my code

I want to keep footer at bottom of the screen even if there is less content. and move it down if there is more content.

After doing some research I got may solution using position this is one of the.

However is some cases when the content increases the the footer overlap the content.

Hence I would avoid the position. Using JS will be my last solution.

Community
  • 1
  • 1
user3845561
  • 68
  • 6

4 Answers4

1

The easiest solution for this is calc()

check this demo.

CSS

#mainCnt {
  min-height: calc(100% - 90px);
}

NOTE: This is not supported in IE8 and below

Tushar
  • 4,280
  • 5
  • 24
  • 39
  • 2
    **for 2.4k rep, you should mention that this is not cross browser and IE9+ supported!** – NoobEditor Jul 17 '14 at 07:01
  • @NoobEditor This is a good solution, anyways we don't need to care below IE9. – user3773599 Jul 17 '14 at 07:03
  • Yea, calc is fine but [it's experimental](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) - that is, not standardized across browsers. In a few years it'll be fine,or if you know your exact audience.. otherwise I'd recommend to use with caution (not any design-critical uses). – DACrosby Jul 17 '14 at 07:03
  • @NoobEditor : your are right, it has to be mentioned. I have done it. Thanks for notifying. – Tushar Jul 17 '14 at 07:11
  • @NoobEditor [Link Here](https://uk.linkedin.com/pub/alex-rutherford/96/500/28b/) Also after this lets delete our comments as its spamming the page haha – Ruddy Jul 17 '14 at 08:30
  • @user3773599 : its not just about you...what if some google visitor comes to this answer but needs support for IE8 also...he should know about the compatibility then...right?? :) – NoobEditor Jul 17 '14 at 08:58
0

You're looking for a Sticky Footer. There's a few ways to do it, here's one:

The basic structure

<div id="wrap">
    <div id="main">

    </div>
</div>

<div id="footer">

</div>

Required CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {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, body {height: 100%;}

#wrap {min-height: 100%;}

#main {
    overflow:auto;
    padding-bottom: 180px; /* must be same height as the footer */
}

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;
} 

/*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]-->
*/
DACrosby
  • 11,116
  • 3
  • 39
  • 51
0

Works great if you can apply a fixed height to the footer.

CODEPEN

HTML

Content!

I'm the Sticky Footer.

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}
Alex Wilson
  • 2,421
  • 11
  • 13
0

Here you go simple solution parent div position relative and child absolute with bottom fixed position http://codepen.io/anon/pen/KgmJb

HTML

    <div id="mainCnt">
<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>   
</div>
<div id="footer">
    Footer
</div>

CSS

*{margin: 0}
#mainCnt {
  min-height: 607px;
  height: 100%;
  position:relative;
}
#footer {
    position: absolute;
  padding: 10px;
  background: red;
  width:100%;
  height:70px;
  bottom:0;
}
Hemant Gogia
  • 11
  • 1