This has no doubt been answered here before, but I find it’ll be easier if I understand what’s going on with the specific pen I’ve got started on. (Ignore the JS, I’m tackling that on my own).
I’ve watched many videos on absolute positioning, relative positioning, the box model, using margins and padding, height and width %, etc. I also know of the newer CSS features like calc(), box-sizing, flexbox, and grid. I’m really trying to get the fundamentals on CSS positioning nailed down, so that I understand for my own benefit what’s going on, in addition to being able to show prospective employers that I have this knowledge.
(I’ve tried getting better at CSS on and off for the last 10 years, and only very recently have I rebuilt enough motivation to try to get a web development job. So, keep in mind that what I say is from a complete outsider’s perspective and that it’s very likely I’ve no idea what I’m talking about with regards to what is and what isn’t important in demonstrating my CSS competency.)
All that said, I’ve got almost all basic CSS down, except for positioning stuff. I know for the most part how absolute and relative positioning work. However, I still have problems with using those in conjunction with margins and padding, whether or not I use the box-sizing property. When I do height: 100% on the html, body, and any elements beneath them, they do indeed stretch to the bottom of the page, but I still get that vertical scrollbar. I could do overflow-y: hidden, but that doesn’t seem like it’s solving the problem. Additionally, a number of videos that I’ve watched have emphasized not using absolute and relative positioning if margin and padding are capable of solving my problems.
What’s the right way to go about the positioning issues in this pen, and in building sites from pure CSS and HTML (i.e., before learning any frameworks) in general? I want to aim for the least complicated/most practical, non CSS-hack approaches.
Thanks!