Css layout help
Hey guys, I'm trying to make a relatively simple layout but cannot get my content to stay within the viewport. I don't want my page to scroll. I have this codepen:
https://codepen.io/vince1444/pen/wvEbvdm
Maybe I'm just blanking, but I cannot for the life of me get it to stay without scrolling. Maybe I'm making this way harder than it has to be?
4 Replies
So I ended up fixing it by adding a height to the navbar and making it
position-fixed, and then just adding the nav height as padding-top to the main element. I really don't like this solution as it feels super sloppy. Any suggestions would be greatWell I'd use sticky over fixed cause then you wouldnt need the height / variable
https://codepen.io/b1mind/pen/jOvoNJz made this for another person just now that has a similar layout
Thanks b1! I'll look into this.
So I made this codepen to make a simpler, reproduceable version of my react app. Been trying to style it all night and things were behaving oddly but wasn't sure if I was just blanking out or not. Finally figured out that my
box-sizing: border-box reset isn't applying 🤦 hopefully that makes it easier 😂