Home / Questions / 25743
Accepted
Otto
Asked: 2020-10-02 07:04:03 +0800 CST 2020-10-02 07:04:03 +0800 CST

How to create a footer that fits at the bottom?

  • 772

Most of most solutions are based on creating a fixed footer position: fixed.

Other alternatives given is an absolute position.

Example

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

But a floating footer is not to our liking, it is not a solution worse when we have a floating menu and a footer with a heighttoo high end.


But what is the point of having a footer that stays at the bottom.

  • That it remains only at the bottom when the content or information area does not group in quantity.

Example (area with short content).

enter image description here

A solution to get a footer from this frame:

enter image description here

Now to show a footer only when the content area has very little information.

One solution would be to have jQuery detect the height and apply a class to firmly fit the footer to the bottom.


How would a solution be planted with jQuery ( for lovers of jquery programming ).

Or what other alternatives can be applied with css without the footer being floating?

jquery

2 Answers

  1. Best Answer

    For this you don't need JavaScript/jQuery or HTML5/CSS3, there is a CSS solution that works even with older versions of browsers. The idea is the following:

    • Make the document fill the full height of the page (put height:100%for the htmland body.
    • Encapsulate all the content of your page in a container that also occupies 100% of the height and has a relative position.
    • The content of your page will have a paddingbottom equal to or greater than the height of the footer
    • The footer will be positioned absolutely below the content that encapsulates everything.

    The code would look like this:

    html, body {
  margin:0;
  padding:0;
  height:100%;
}

#pagina {
  position: relative;
  min-height: 100%;
}

#contenido {
  padding-bottom:50px; /* este valor debe ser igual o mayor al alto del pie */
}

#pie {
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}
    <div id="pagina">
  <div id="cabecera">LOGO</div>
  <div id="contenido"></div>
  <div id="pie">2016 &copy; Nombre Empresa</div>
</div>

    Since you want an alternative with JavaScript/jQuery, here's one for you; although I tell you that there can be many possibilities and, as I mentioned in a comment, it really is not necessary with the CSS described above.

    The idea would be to do something like this:

    • Put the different elements on the page, regardless of heights or anything
    • Make the footer have absolute position but don't specify which one.
    • Create a function that:
      • Calculate the height of the document
      • Calculate the height of the window
      • Calculate the height of the foot/footer
      • If document height + footer height is less than window height, then make footer stick below
      • If not, leave the footer where it is.
    • Create a handler so that the function created in the previous step is called when the page loads and when the window is resized.

    Here is an example of how it could be done:

    function ajustarPie() {
  var winH = $(window).height();
  var docH = $("body").height();
  var pieH = $("footer").height();
  
  if (docH + pieH < winH) {
    $("footer").attr("class", "bottom");
    } else {
      $("footer").attr("class", "");
      }
  }

$(document).ready(ajustarPie);
$(window).on("resize", ajustarPie);
    footer {
  position:absolute;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  left:0;
  width:100%;
}

footer.bottom {
  bottom:0;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header>LOGO</header>
<main>
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
  <p>Párrafo 3</p>
  <p>Párrafo 4</p>
  <p>Párrafo 5</p>
</main>
<footer>
  2016 &copy; Nombre empresa
</footer>

    • 5

  2. only that it wraps at the bottom of the page (always stays at the bottom), but it is alternative only when the content area is short. Because when there is extensive content there are no problems with the footer

    You can do it via flexbox:

    *,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 1rem;
}

header h1 {
  font-family: 'segoe ui';
  font-weight: 500;
  text-align: center;
}
.content p {
  font-family: 'segoe ui';
}
.content p:first-letter {
  font-size: 20pt;
}
footer {
  background-color: #222;
  padding: .5rem .8rem;
}
footer p {
  color: rgba(255,255,255,9);
  font-family: 'segoe ui';
  text-align: center;
}
    <section class="container">
  <header>
    <h1>Header</h1>
  </header>
  <main class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed provident explicabo corporis ad consequatur possimus at recusandae, minus nostrum a laudantium doloremque voluptates, pariatur officiis deleniti molestiae. Quas, quae, minima!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ipsam consectetur consequatur, natus unde, deserunt sit voluptate a nesciunt vero in inventore quidem! Voluptate, saepe, veritatis laborum mollitia assumenda placeat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, rem, aut. Mollitia quasi, rem vero delectus iusto optio dolorum alias assumenda commodi quod, cum incidunt dolore pariatur ad minus voluptatem.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora laudantium accusamus unde provident possimus rem nemo officiis, quam perferendis, optio repudiandae nulla rerum doloremque culpa, dignissimos veniam aliquid aliquam ratione?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quos hic rerum, ipsum similique nostrum quis cum repellat eum veritatis magnam vero tempore sequi facere alias, laudantium esse. Nihil, impedit.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, at in! Velit placeat incidunt quidem perspiciatis officiis consequuntur! Tempora nihil nam nemo harum quia adipisci aut, omnis, magni totam quae!
    </p>
    
  </main>
  <footer>
    <p>Footer</p>
  </footer>

    Try taking two out pso you can see the behavior.

    • 3