Kevin Powell - Community•12mo ago

Why is my footer (sometimes) behind my other content?

I'm trying to force my footer to the bottom of the page, on pages with little content this works fine (using flexbox) but pages with long content the footer is displayed behind some of the content?

19 Replies

ForsetisFateOP•12mo ago

The purple bar is my footer, the product cards should be above it

trashlord•12mo ago

what is the z-index of the footer? oh wait i see what you mean above not behind

ForsetisFateOP•12mo ago

I never specify the z-index for it, but it should be at the bottom of the page

Jochem•12mo ago

without code (preferably viewable live in-browser), it's like staring into a crystal ball you're going into a garage and asking the mechanic to diagnose your car when you left it at home

trashlord•12mo ago

speaking from experience from a family of mechanics, its your timing belt, im gonna have to order one in.

Jochem•12mo ago

"Afraid that's about $1200 in labor."

trashlord•12mo ago

thats if I get to it today and I cant let you drive out of here on those tyres

ForsetisFateOP•12mo ago

I'm not sure the best way to share the code, it's a private repo and not yet published online and there's a lot I'd probably need to share

Jochem•12mo ago

ideally, you'd make a minimal reproduction, just the absolute bare minimum of code to reproduce the problem lots of people here want to help, but there's no practical way to do it without seeing the code. This isn't a general problem that pops up a lot afaik

ForsetisFateOP•12mo ago

Here is a link to the relevant code, hope that's enough https://paste.mod.gg/pyzynogvmxqu/0

BlazeBin - pyzynogvmxqu

A tool for sharing your source code with the world!

ForsetisFateOP•12mo ago

Removing height: 100% from my body selector fixed the footer being behind other content, but now on shorter pages the footer is stuck to the bottom of the content and not at the bottom No matter what I do with flexbox I can't get it to stick to the bottom

b1mind•12mo ago

https://codepen.io/b1mind/pen/PojdyQz

Brent Morton

CodePen

Pushed footers Flex / Grid

...

b1mind•12mo ago

Also I'm seeing lots of vw/vh avoid those

b1mind•12mo ago

https://youtu.be/veEqYQlfNx8?si=9_bIrkND5qVB8mkB

Kevin Powell

YouTube

The problems with viewport units

Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...

b1mind•12mo ago

nothing else really stands out but again lots of code no way to run it so...

ForsetisFateOP•12mo ago

Oddly enough,setting min-height: 100svh on the body seemed to fix it, although it shrunk my hero banner..

b1mind•12mo ago

.cart-wrapper{
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
  transition: all 1s ease-in-out;
}

.cart-container{
  height: 100vh;
  width: 600px;
  background-color: var(--light);
  float: right;
  padding: 40px 10px;
  position: relative;
}

.cart-wrapper{
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
  transition: all 1s ease-in-out;
}

.cart-container{
  height: 100vh;
  width: 600px;
  background-color: var(--light);
  float: right;
  padding: 40px 10px;
  position: relative;
}

Like this kinda stuff scares me but I have no context to see the stacking context xD the float :deed:

b1mind•12mo ago

I would make a minimal demo in https://pen.new though so we can actually debug

CodePen

Create a New Pen

...

b1mind•12mo ago

you can just use dummy images from picsum.photos or something

Gaming

Programming

Why is my footer (sometimes) behind my other content?