How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?
I have a grid setup on the body of my page and define two rows. Row A is fixed at 60px and row B is set to 1ft. I also ahve the body min-height set to 100VH. This combination causes a vertical scroll bar to apear. If I change 1fr to 0.99fr it goes way, like wise if I change 100vh to 99vh it goes away. This seems like the wrong way to fix this issue so what is the right way?
Code pen example (note I do use normalize) https://codepen.io/Eaglef90/pen/qBGPMpJ
33 Replies
Its something normalize is doing
remove it and it works as intended
Also I would make sure you know the footguns of 100vh
better off with lvh or svh and a fallback of 100% imo
I had already tried removing normalize and it acutally makes things much worse and causes a full scroll action
Probably because you need to set body margin to 0
I would not style directly on the body like this either, sometimes best to make a wrapper and just let the body be free.
set fonts sure but not grid templates
only time I ever set it to flex or grid would be to get a proper min-height for use with 100% trick
Looks like I can't use lvbh or svh, not supported at all by FireFox.
Then use 100% like I show in my codepen
Kevin Powell
YouTube
Use these instead of vh
Looking to step up your CSS game? 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=viewportunits I have a bunch of courses, including several free ones.
I see people use
vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have,...vw/vh are cursed imo
make sure you understand them before using them
Your code pen notes a "fooguns if using sticky", do plan on having the header sticky
Then use it 😄
You can make body grid and min-height 100%
Really depends on where the sticky item is.
I want the entire header to be sticky on the top of the page.
Jsut started to watch the video you linked. He talks about s/d/l vh all not supported by FireFox so I can't use that as a solution.
I am also confised by your "then use it" comment. Your not says if I use stick I am getting "footguns" (I presume you mean I am going to shoot my self in the foot).
He explains the biggest footgun, mobile bars.
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...
He made this so I don't have to keep explaining it xD
Also FF users are like 2% of users
That is why you use the fallback of 100% for now
or vh (if you must)
FF will just ignore the svh and use fallback*
I am not famiare with codepen and am trying to figure out your example. There is not normal HTML markup. You ahve main.grid I know .grid is the CSS class but is main = body?
its a html template language called pug, you can compile it into html if its easier for you
and no main is a <main> element
you don't add body to codepens just inside body 😄 (its there for you already)
So that is basicly using the main as a wrapper like you said to add eailer?
yup but a wrapper can be just a div if it makes more sense semantically
you should always have one <main> on the page though (typically always with h1 heading)
where "main" content lives
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
I did know about the stick to one main thing, and thanks for the compiled html. Your example is more easy to read now. STuill going though it and wathcing the last video you linked.
np hope it helps some.
Watching this and looking at code I am wondering, should my header even be part of the grid?
The intenti s a full width header with logo, nav, search bar, etc in it that is sticky to the top. Taking it out of the grid seems right and would also probibily get rid of this whole problem?
Yea cause I don't like setting set heights on things either
with grid you just auto 1fr auto and brrrr
to get the full page if less content than full height that is
maybe have your nav inside your header? Pretty sure you get some accessibility bonus on that as if its a root header (direct child of body) and has a nav that nav becomes "main navigation"
or if the nav is on the root I think too
There are two differnt navs. The head will contain the site navigation and the left column sub section navigations. The more I think on it the more the header seems like it should not be part of the grid.
you do you
Post again if you run into issues 👍
Would you agree it sounds like header should not be part of the grid? Sticky header then grid for 3 column with footer under mid column?
Nope I would do it just like I did
🥲
Also because I use that same grid wrapper to do breakout/full column templates.
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...
Sidenote: This is the same topic he just did a talk for at CSSday ❤️ and makes me so happy
its a wonderful pattern
Maybe not something for your layout but good to know about 😉
I was actually tryign to find that to rewatch it when you did suggest the wrapper div I remember wathcing it a while ago. My Guide is about to run events so I have to take a little break from working on this but I will play with the wrapper idea as well as give that video another watch afteword and if still ahve questions I will come back. Apreacite the help
You have me very intrigued by pug, right when I’m learning react of course. I wonder if there’s a way to use pug in react 🤣