How do I get the footer to stay at the bottom of the page ?

[Storgaard]

How do I get the footer to stay at the bottom of the page ?? Sure the footer always stay under the content on the page, but when there are not that much content on the page OR when the page is viewed on a high resolution monitor like a 5K Apple monitor, then the "body" shows beneath the footer. How to fix this, also I prefer to do this the correct way in back office somehow.

 

Se attachment.

 

[shacker]

is a big footer, but you can change the css of the global.css to get it fixed

 

 

@media (min-width: 768px)

.footer-container {

1. background: url(../img/footer-bg.png) repeat-x #333;
2. position: fixed;
3. bottom: -41px;
4. width: 100%;

}

[Storgaard]

 

is a big footer, but you can change the css of the global.css to get it fixed

 

 

@media (min-width: 768px)

 

.footer-container {

1. background: url(../img/footer-bg.png) repeat-x #333;
2. position: fixed;
3. bottom: -41px;
4. width: 100%;

}

 

Thanks, I have just tried this and it does not work. What lines exactly do I need to change in the attached code?

.footer-container {
  background-color: #333; }
  @media (min-width: 768px) {
    .footer-container {
      background: url(../img/footer-bg.png) repeat-x #333; } }
  .footer-container .container {
    padding-bottom: 100px; }
  .footer-container #footer {
    color: #777777; }
    .footer-container #footer .row {
      position: relative; }
    .footer-container #footer ul.row {
      position: static; }
    .footer-container #footer .footer-block {
      margin-top: 45px; }
      @media (max-width: 767px) {
        .footer-container #footer .footer-block {
          margin-top: 20px; } }
    .footer-container #footer a {
      color: #777777; }
      .footer-container #footer a:hover {
        color: #fff; }
    .footer-container #footer h4 {
      font: 600 18px/22px "Open Sans", sans-serif;
      color: #fff;
      margin: 0 0 13px 0;
      cursor: pointer; }
      @media (max-width: 767px) {
        .footer-container #footer h4 {
          position: relative;
          margin-bottom: 0;
          padding-bottom: 13px; }
          .footer-container #footer h4:after {
            display: block;
            content: "\f055";
            font-family: "FontAwesome";
            position: absolute;
            right: 0;
            top: 1px; }
          .footer-container #footer h4.active:after {
            content: "\f056"; } }
      .footer-container #footer h4 a {
        color: #fff; }
    .footer-container #footer ul li {
      padding-bottom: 8px; }
      .footer-container #footer ul li a {
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4); }
    .footer-container #footer #block_contact_infos {
      border-left: 1px solid #515151; }
      @media (max-width: 767px) {
        .footer-container #footer #block_contact_infos {
          border: none; } }
      .footer-container #footer #block_contact_infos > div {
        padding: 0 0 0 5px; }
        @media (max-width: 767px) {
          .footer-container #footer #block_contact_infos > div {
            padding-left: 0; } }
        .footer-container #footer #block_contact_infos > div ul li {
          padding: 0 0 7px 4px;
          overflow: hidden;
          line-height: 30px; }
          .footer-container #footer #block_contact_infos > div ul li > span,
          .footer-container #footer #block_contact_infos > div ul li > span a {
            color: #fff;
            font-weight: normal; }
          .footer-container #footer #block_contact_infos > div ul li i {
            font-size: 25px;
            width: 32px;
            text-align: center;
            padding-right: 12px;
            float: left;
            color: #908f8f; }
    .footer-container #footer .blockcategories_footer {
      clear: left; }
    .footer-container #footer #social_block {
      float: left;
      width: 50%;
      padding: 22px 15px 0 15px; }
      @media (max-width: 767px) {
        .footer-container #footer #social_block {
          width: 100%;
          float: left;
          padding-top: 5px; } }
      .footer-container #footer #social_block ul {
        float: right; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block ul {
            float: none; } }
        .footer-container #footer #social_block ul li {
          float: left;
          width: 40px;
          text-align: center; }
          @media (min-width: 768px) and (max-width: 991px) {
            .footer-container #footer #social_block ul li {
              width: 30px; } }
          .footer-container #footer #social_block ul li a {
            display: inline-block;
            color: #908f8f;
            font-size: 28px; }
            @media (min-width: 768px) and (max-width: 991px) {
              .footer-container #footer #social_block ul li a {
                font-size: 20px; } }
            .footer-container #footer #social_block ul li a span {
              display: none; }
            .footer-container #footer #social_block ul li a:before {
              display: inline-block;
              font-family: "FontAwesome";
              vertical-align: -5px;
              font-weight: normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale; }
            .footer-container #footer #social_block ul li a:hover {
              color: #fff; }
          .footer-container #footer #social_block ul li.facebook a:before {
            content: "\f09a"; }
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }
          .footer-container #footer #social_block ul li.vimeo a:before {
            content: "\f194"; }
          .footer-container #footer #social_block ul li.instagram a:before {
            content: "\f16d"; }
      .footer-container #footer #social_block h4 {
        float: right;
        margin-bottom: 0;
        font-size: 21px;
        line-height: 25px;
        text-transform: none;
        padding: 0 10px 0 0; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block h4 {
            display: none;
            text-align: center; } }
    .footer-container #footer .bottom-footer {
      position: absolute;
      bottom: -55px;
      left: 0; }
      .footer-container #footer .bottom-footer div {
        padding: 15px 0 0 0;
        border-top: 1px solid #515151;
        width: 100%; }

[Walrus]

This is probably the best tutorial on a sticky footer: http://ryanfait.com/sticky-footer/