CODEWITHSUNDEEP
htmlcssfooter
Paul
Paul

Reputation: 654

Keep footer at the bottom of the page (with scrolling if needed)

I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.

I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html

However when I use the following, the footer is showing halfway my long page for some reason.

position: absolute; bottom:0

I have both short pages and long pages and I would like it to be at the bottom of both of them.

How can I keep the footer at the bottom on a long page as well?

Fiddle

I've created these Fiddles to show the problem and test the code. Please post a working example with your solution.

My footer css:

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }

Upvotes: 23

Views: 108361

Answers (9)

MadNegi
MadNegi

Reputation: 1

position:fixed;
bottom:0;

Add this on the footer if you want to make the footer on the bottom while scrolling.

Upvotes: 0

MAChitgarha
MAChitgarha

Reputation: 4298

Again, here's where flexboxes come with a clean hack: flex-grow.

First of all, let's see the code:

div#container {
  /* The power of flexboxes! */
  display: flex;
  display: -webkit-flex;
  flex-direction: column;

  min-height: 100vh;
}

div#container div#content {
  /* Key part: Eat the remaining space! */
  flex-grow: 1;
}

div#container footer {
  flex-basis: 100px;
}



/* Appearance, not important */
body {
  margin: 0;
  font-family: Fira Code;
}

@keyframes changeHeight {
  0% {height: 30px}
  10% {height: 30px}
  50% {height: 400px}
  60% {height: 400px}
  100% {height: 30px}
}

div, footer {
  color: white;
  text-align: center;
}

div#content section {
  background-color: blue;
  animation: changeHeight 10s infinite linear;
}

footer {
  background-color: indigo;
}
<div id="container">
  <div id="content">
    <!-- All other contents here -->
    <section>Main content</section>
  </div>
  <footer>
    Footer
    <!-- Footer content -->
  </footer>
</div>

If the content in #content cannot reach the footer, then flex-grow extends the element to fit the remaining space, as the #container has the minimum height of 100vh (i.e. the viewport height). Obviously, if the height of #content plus the footer exceeds the viewport height, #container will be scroll-able. This way, footer always remains at the very bottom.

The animation in the snippet, which belongs to a sample section inside #content, tries to show you the exact same thing: its height is changing between 30px and 400px (change it to a greater value if needed).

Also, for the sake of information, see the difference between flex-basis and height (or width).

Tip: In CSS3, if something does not work, take a look at flexboxes and grids. They often provide clean solutions.

Hope it helps.

Upvotes: 10

Guilherme Abacherli
Guilherme Abacherli

Reputation: 345

Putting "position" as "fixed" with the "bottom: 0" solved my problems. Now it is responsive, the footer appears correctly (and remains there even with scroll) on both bigger screens (pc, laptop) and smaller ones (smartphone).

.footerbar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100vw;
  min-height: 3vh;
}

Upvotes: 0

deepak raghuwanshi
deepak raghuwanshi

Reputation: 144

Now we have flex-box which is very straight forward.

 body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

Note: we must contain only two div inside the body. One for footer and another for rest items

Upvotes: 3

scmccarthy22
scmccarthy22

Reputation: 631

I would suggest the "sticky footer" approach. See the following link:

http://css-tricks.com/snippets/css/sticky-footer/

Upvotes: 21

Dustin Scott Garza
Dustin Scott Garza

Reputation: 130

Replace Height with overflow:auto; & give body a position

html,body {
    position:relative; <!--Also give it a position -->
    margin:0;
    padding:0;
    overflow:auto; <!-- HERE -->
}

Position the footer to be relative to body

/* --- Footer --- */
.footerbar { 
    position: relative; <!-- HERE -->
    width: 100%;
    bottom: 0;
    color: white;
    background-color: #202020;
    font-size: 12px; 
}

It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.

Short Page Edit

min-height:400px; <!-- Give this a real number like 400px 
                  or whatever you want...dont leave it to 100% as -->
}

Upvotes: 5

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

html,body {
    margin:0;
    padding:0;
    height:100%;
}
.content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footerbar {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

If IE7

<!--[if lt IE 7]>
<style type="text/css">
    .content { height:100%; }
</style>
<![endif]-->

Upvotes: 0

Shankar
Shankar

Reputation: 125

We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us. There were always surprises that required more hacks and more patches. here is what we have settled for:

css:

html, body  {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #6f643a;
    font-family: Arial;
    font-size: 11pt; 
}

form {
   height: 100%;
}

body:

<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0"  width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" align="center" >
         contents goes here
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="gray" align="center" style="padding:20px">
            <font color="#FFFF00">copyright:Puppy</font>
            footer goes here
        </td>
    </tr>
</table>

That is all you need. - if you are using asp.net don't ignore form height.

Upvotes: 1

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

There is an excellent footer tutorial here.

The demo page is here.

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Upvotes: 0

Related Questions