How to unsticky footer position in grid?


On my Technical Documentation Challenge:

I would like my footer to be displayed at the bottom of the page, and not with sticky position like the header. Any ideas on how to do this?

What you are talking here seems like is going about, positions.
That is mostly done with CSS

The bellow guide might be of use to you:

It’s not about centering, but the fixed position of the footer. I want it to appear only once all the scrolling through the main section is done.

The thing is that you have given your rows a total height of 100vh, and each row has its own scrollbar. Your whole page is 100vh, and each row has a scrollbar in case its content is more than the allotted heigth.
It’s not that the footer is sticky… it’s that everything has a fixed height.
If you want the footer to appear only once you have scrolled all the main part, you need to change your layout of things, and the way your grid is set.

I really would recomend you to take a look over the whole article again.
It explains the very basic and It tells you about how elements can influance one another. And differend positions. Their the very basic’s of working with elements and positions. Something that could be usseful here

I see,

So after playing around I realized a few things: using vh/vw automatically makes the thing stick.
So I put the footer outside the grid container. Now after I scroll to the bottom of main, it automatically scrolls the outside of the website to show the footer. I guess that’s good enough for now.

you could try not giving fixed height to your rows, there is a way.

I have tried this:

.site-grid {
  display: grid;
  grid-template-columns: 15vw 85vw;
  grid-template-rows: max-content max-content max-content;
    "title title"
    "sidebar main"
    ". main";

But then I lose the sticky position of the title and I don’t know what to do with the empty space below the sidebar. It does take care of double vertical scrollbars which is another thing I wanted to do.

it doesn’t have to be a single grid for everything
you could do grid inside grid, or something without grid, and then a grid… many things

The way that you design the title, sidebar and main content are not wrong but you should think that the sidebar is not distributed equally within the space. It’s a little bit confuse your sidebar CSS, so there are a few things that I would change.

  1. You have more control when wrapping every content in a <div> with class container.

  2. Avoid repeat tags and properties value. e.g The .sidebar {} is referenced twice and background-color.

  3. The .sidebar > a{} is where is confusing as well.

There is no problem to use Flexbox or Grid, the problem is when it’s not clear for you how it works, so I highly recommend to check Grid and Flexbox docs and videos and then re-do you CSS using which one suit you better.

Here a sample that I wrote to demonstrate how I would approach this situation.
Sample Code

1 Like

Thanks, I will keep an eye out for that.
From your setup, how would you go ahead making the sidebar sticky and fully visible as you scroll down?

I updated the codepen Sample, check that out.