How to keep my footer under my content when said content changes height?

Question

In my project, I have many routes that each have different page heights. I am trying to place my footer at the bottom of the page when the content doesn't fit the viewport or when it does. I have trying making multiple wrapping divs and looked at many different solutions, however they are all either wrong or deprecated. The closest I have gotten was to statically place the footer at the bottom of the page. However, on some pages that don't have much content, you would still have to scroll to see the footer. How would I go about dynamically placing the footer at the bottom of my content?

Here is how I structured my content:

<body>
 <div id="app">
  <script type="module" src="/src/main.js"></script>
 </div>

</body>
<footer class="footer">
 <h5>Footer</h5>
 <p>footer goes here</p>
</footer>

Here is my CSS:

 html, body{
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .footer{
    display: flex;
    flex-direction: column;
    background-color: gray;
    color: black;
    text-align: left;
    width: 100%;
    margin-top: calc(75% + 60px);
  }

ademclk · Answer 1 · 2022-08-23T20:20:03.180

0

a. Give negative margin to the footer.

 For example, `margin-top: -50px;`

Or

b. Use calc() function in CSS for min-height value of your content.

 For example, `min-height: calc(100vh - 70px);`

or

c. Add clear property with both value.

clear: both

edited Aug 23 '22 at 20:20

answered Aug 23 '22 at 18:41

ademclk

112
1
3
10

1

Unfortunately, I can't seem to make your solution work. Putting a negative margin only superposes my footer on my head or my content, and setting a min-height does the same thing. Is there any other solution? – DWKK Aug 23 '22 at 19:45
Try clear: both property on footer. @DWKK – ademclk Aug 23 '22 at 20:20

score 0 · Answer 2 · answered Aug 23 '22 at 18:52

HTML Code

  <body>
  <div class="pagewrap">
    <nav>...</nav>
    <main>...</main>
    <footer>...<footer>
  </div>
</body>

CSS Code

.pagewrap{
        display: flex;
    
        /*vertically stack children*/
        flex-direction: column;
    
        /* expand to take full height of page */
        /* min-height overrides both height & max-height */
        min-height: 100vh; 
    
      }

do this

score 0 · Answer 3 · answered Aug 23 '22 at 18:57

0

You can anchor it to the bottom like this

.footer{
  display: flex;
  flex-direction: column;
  background-color: gray;
  color: black;
  text-align: left;
  width: 100%;

  /* Anchors footer to the bottom */
  position: fixed; 
  bottom: 0; 
}

answered Aug 23 '22 at 18:57

Imran

21
4

How to keep my footer under my content when said content changes height?

3 Answers3