Footer should be at the bottom, content in the middle

HTML & CSS
24

If a container is given a background: https://jsfiddle.net/6g9ks0ty/3/

How do you have the footer appear when a background is being used on a container?

If I remove the background from it, the footer will be visible.

Example:

.containerD {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  
  /* Enable scroll if needed */
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
  background:repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
    repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
    repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);

}
25

That container is fixed positioned and covers the viewport. How does a footer have any bearing on that container?

The footer would either need to be created inside that container or itself absolutely placed on top of the container which would most likely overlap.

As mentioned numerous times now you are not planning ahead and you can only achieve your objectives if you code them from the start. Chopping and changing is ok for testing but will never achieve a reliable method unless you code from scratch.

1 Like
26

If I add position: relative to the footer and high z-index then you will see this.

jsfiddle.net_6g9ks0ty_3_ (2)
jsfiddle.net_6g9ks0ty_3_ (2)685×722 3.51 KB

However if there is anything else on that page the footer will overlap it.

On another issue you have your blue button page but you have put the footer way down below the fold.

jsfiddle.net_6g9ks0ty_3_
jsfiddle.net_6g9ks0ty_3_782×756 11.2 KB

I didn’t know there was anything there until I scrolled and saw this.

jsfiddle.net_6g9ks0ty_3_ (1)
jsfiddle.net_6g9ks0ty_3_ (1)800×762 12.9 KB

What would be the point of all that? Some mystery tour perhaps.

27

I don’t have the footer positioned in the right spot in the html? https://jsfiddle.net/cbm5nztf/3/

Where else would it be placed?

  <footer class="my-footer">
    <div class="footer-top">
      <a href=" #" target="_blank">something</a><b>
        <!--|--></b>
      <a href="#" target="_blank">something</a><b>
        <!--|--></b>
      <a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a><b></b>

      <a href="#" target="_blank">Feedback</a>
    </div>
    <div class="footer-mid">something</div>
    <div class="footer-base">something</div>
  </footer>
</div>
28

It looks the same as my screenshot above (the one with the bricks). The footer is at the bottom.

29

@PaulOB What if you use visibility:hidden ?

30

I was referring to what you said there.

Was I supposed to do something to fix that?

I thought that had to do with where the footer is placed in the HTML.

The issue is that the buttons aren’t closer to the footer?

Is that what you were saying?

31

The issue is that the footer is below the fold of the viewport and I only discovered it by accident.

1 Like
32

I’m not sure what that question relates to but if you are talking about the hiding and showing and animating then you can use visibility:hidden and animate the opacity or other things but you would need to do other things as well to remove the element from the flow as visibility:hidden just makes elements invisible. They are actually still there on the page so you need to also remove them from the flow such as placing them off-screen and in which case you wouldn’t need the visibility:hidden because its off screen anyway.

1 Like
33

Is there a way to fix that in the code?

How do you move the footer above the fold of the viewport?

34

You can’t because your blue button grid is min-height:100vh which means it always fills the viewport.

.containerB {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;
    margin-top: auto;
}

You’d have to remove the min-height and then the footer wold pop back into view.

35

What is wrong with removing that if that is what fixes it?

min-height: 100vh;

I don’t see any issues with removing that from the code.

36

No thats fine if you remove it. I just assumed you wanted it to take up the whole viewport by itself.

1 Like
37

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.