Please help with Positioning - scroll bar not showing all of app

#1

Hi everyone, I would appreciate some help with this. I’ve made a little Caesar’s cipher app. Everything is fine, but when the page is really zoomed in a lot the top of the app starts getting cut off from the page and the scroll bar won’t scroll up to see it. I tried adding overflow: scroll or overflow: auto to <body> and <html> but nothing changed. What am I missing? I’m doing positioning with flexbox.

Is it because I have margin: 0 for <body>? I put that in to prevent a scroll bar from appearing when it’s not needed. (something about margin collapse maybe?)

Help is much appreciated.

https://codepen.io/stressstressstress/pen/KKKPjRL?editors=0100

#2

I see it!
Remove the html, body {height: 100%;}
Then add some margin to the top of your #app

#3

It seems like an issue with flexbox, although you have to zoom in really far for this to happen.

Try using CSS Grid instead for centering. Just switch flex with grid and remove the flex-direction. To make it simpler move the footer inside the main element and set text-align: center; on the footer. You may also want to give the body a bit of padding (like 10px or something).

Also using the body as a layout container isn’t really the best idea, you usually want to make a dedicated container element instead.

#4

@Aries-17 Thanks for the suggestion. I think I need that (or height: 100vh) though so that the radial-gradient background covers the whole page properly. But I changed the body height to 100vh instead, and now it works! Easy fix.

@lasjorg Thanks for the help. CSS Grid scares me, but I will try to use it for the next project. :sweat_smile: I’ll add a container element instead of using body too. (Just making sure: that should be a div that wraps main and footer?)

#5

You have got nothing to be scared of. For centering it works exactly the same as Flexbox.

Code shorten for brevity:

body {
  display: grid;
  justify-content: center;
  align-items: center;
}

footer {
  text-align: center;
}

<main>
...code that comes before
  <footer>
    <p id="footer-text">Created by C McLellan</p>
  </footer>
</main>

Edit: but yes, min-height: 100vh on the body works as well.

1 Like
#6