-2

I have some HTML that looks like this: https://jsfiddle.net/9uwmxLa8/

I can't get the footer to stay at the bottom and not overlap the text on the page. The footer should stay at the bottom of the page if there isn't enough content to force the footer below the window height. I have the first part right--but can't get it to not overlap; I know it's because of position: absolute--but everything I search online tells me this is necessary.

I want it to function like this: https://codepen.io/cbracco/pen/zekgx

Any ideas how to fix this?

<div class="container">
  <div>
    <h1>This is some long test content.</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget sapien risus. Cras eleifend, diam quis tempus mattis, nunc leo vulputate metus, et rhoncus elit libero ac nisl. In ligula lectus, ultricies in pretium eget, accumsan non turpis. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus molestie ultricies. Vivamus et libero et mauris rutrum hendrerit sed in leo. Fusce luctus lorem iaculis, mattis felis non, suscipit nisi. Integer tempus blandit est tempus ullamcorper.
      Ut at risus eget arcu congue rhoncus sit amet pharetra turpis. Maecenas ultricies, ex eget egestas scelerisque, ante ipsum placerat mauris, vitae porta felis mauris dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p>
      Duis fringilla dolor a neque laoreet tristique. Donec non feugiat orci. Nulla nulla mauris, fermentum at arcu quis, venenatis consectetur odio. Vestibulum a risus non lorem ullamcorper sollicitudin. Praesent quis ante ipsum. Suspendisse odio ligula, tincidunt
      vitae consectetur vel, posuere tincidunt odio. Donec at mollis neque. Sed ex felis, aliquam sed turpis eget, porta aliquet justo. Vivamus vestibulum libero id pulvinar egestas.
    </p>
    <p>
      Quisque vestibulum urna eu blandit consectetur. Integer eget massa suscipit, scelerisque augue sed, mattis erat. Proin ut tincidunt nisi. Duis vestibulum congue accumsan. Vivamus a nisi tellus. Proin pretium neque eros, quis lacinia nisl pulvinar eget.
      Quisque commodo urna eu nibh vulputate accumsan. Sed nec neque blandit, commodo metus sed, hendrerit orci. Nullam ullamcorper libero massa, vel pretium felis vulputate sed. Mauris in mauris pretium, accumsan erat quis, dapibus lacus.
    </p>
    <p>
      Quisque arcu metus, ultricies sed urna a, gravida aliquam mauris. Nullam quis velit odio. Pellentesque dignissim odio tortor, at tempus nunc posuere et. In consequat eros a nunc varius, quis varius metus malesuada. Mauris viverra auctor elit quis hendrerit.
      Donec risus ante, viverra et ante a, egestas faucibus purus. Integer semper id nulla eget vehicula. Aliquam a egestas leo. Suspendisse eu magna sit amet eros tempor ultrices. Quisque sed tempor purus, vitae egestas nunc. Cras congue nulla in sem
      eleifend, sed pharetra ipsum volutpat. Etiam suscipit lacus ultricies dolor hendrerit fermentum. Pellentesque vestibulum in tellus ac blandit. In nec elit non eros tincidunt semper. Fusce sed leo eget ex laoreet fermentum sed vitae nibh. Aliquam
      aliquam erat magna, sit amet gravida neque aliquam ac.
    </p>
    <p>
      Phasellus vehicula, libero eget tempus tristique, lectus felis ornare erat, sit amet semper sapien sem ac nisl. Sed dignissim vulputate mauris, id imperdiet tellus tincidunt id. Proin eget risus a enim convallis pulvinar. In bibendum augue in tellus fermentum
      sollicitudin. Proin finibus tellus lacinia hendrerit faucibus. Curabitur congue aliquam eros non condimentum. Nullam justo ex, pulvinar ac fringilla nec, ullamcorper in lorem ullamcorper in lorem ullamcorper in lorem. Quisque vestibulum urna eu
      blandit consectetur.
    </p>
  </div>


  <div class="footer">
    <div>
      This is a footer
    </div>
  </div>
</div>

SCSS:

p {
  margin: 0 auto;
  padding-top: 32px;
  max-width: 75%;
  font-size: 1.5em;
}

.container {
  min-height: 100%;
  position: relative;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: cyan;
  text-align: center;
}
Nxt3
  • 1,970
  • 4
  • 30
  • 52
  • 1
    Seems like a vague question. What do you mean by "the footer to stay at the bottom and not overlap the text"? Do you mean the bottom of the parent or the bottom of the window? Is it supposed to always be visible? – pjones235 Dec 22 '17 at 14:47
  • Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – Temani Afif Dec 22 '17 at 14:58
  • @pjones235 I updated the OP w/ further clarification. – Nxt3 Dec 22 '17 at 15:07
  • If the [codepen](https://codepen.io/cbracco/pen/zekgx) mentioned in your question is what you want, why not use it? It cannot be applied to your case? – ConnorsFan Dec 22 '17 at 15:09
  • @ConnorsFan Because it isn't working with my specific layout for some reason. Hence, the question. – Nxt3 Dec 22 '17 at 15:10
  • Yes, but the `html` and `body` tags don't do anything because this is inside an Angular component. – Nxt3 Dec 22 '17 at 15:18

3 Answers3

0

position: absolute takes the element out if the normal layout. You then use left, right, and bottom to stick the footer to the bottom, essentially putting it over the bottom of the page.

By taking out those lines, my fiddle seems to above what you're wanting. If you want the footer to not have a margin, turn the margin to 0. Absolute positioning is not how that's done.

https://jsfiddle.net/kLqp3my7/

erik258
  • 14,701
  • 2
  • 25
  • 31
  • I edited my OP to further clarify what I'm looking for. – Nxt3 Dec 22 '17 at 14:59
  • Ah, ok, my answer definitely doesn't do that. It's tricky, as you want normal layout when the page is long enough, but different layout when the content isn't long enough to fill the page. I've seen people do it with JavaScript - but I think down that path lies lower performance, heavier websites that tend to have small layout errors causing things like a 1 pixel scroll bar if you don't get all the sizes just right. I'll wait and see if anyone comes up with an elegant solution. – erik258 Dec 22 '17 at 15:22
0

Make the body 100% of your page, with a min-height of 100% too. The footer is then given negative margin-top:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}
singu ruthwik
  • 1
  • 4
  • This works if I know the height of the footer. I'm actually using a 3rd party component for the footer that I can't show because it's internal to my company. – Nxt3 Dec 22 '17 at 14:58
0

You can create a footer that will stick to the bottom of the page fairly easy using flexbox

set the .container to be a flex container with display: flex;, and stack the flex items in a column with flex-direction: column;

then set the main content to flex: 1 which is shorthand for

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

this will make it so that it will grow to fill the space, which will push the footer to the bottom of the page.

When the main content hits the footer, it will push the footer off the page since its in a flex container.

$(".add-section").on("click", function(){
  $("main").append("<div class='section s3'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>");
});
* {
  box-sizing: border-box;
}

html, body {
  font-weight: 300;
  font-size: 16px;
  padding: 0;
  margin: 0;
  height: 100%;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

header {
  background: grey;
}
header .logo {
  padding: 1.4rem;
  font-size: 2rem;
}

main {
  flex: 1;
}

.section {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  margin: 0;
  background: #ccc;
}

footer {
  background: grey;
  padding: 1.2rem 1.4rem;
  font-size: 1.2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class='wrap'>
  <header>
    <div class='logo'>
      Flexbox Footer
    </div>
    
  </header>
  <main>
    <div class='section s1'>
      <button class='add-section'>Add Section</button>
    </div>
    <div class='section s2'>
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </div>
  </main>
  <footer>
    Footer
  </footer>
</div>
Tyler Fowle
  • 549
  • 2
  • 13