Question 42467 in Html Question posted in
Some basic documentation can be found here.

Unable to fit web page to viewport – Html

I want the page to fit exactly the viewport and believed that the body properties below would work but I’m still getting a vertical scrollbar.

body {
  display: grid;
  grid-template: .8fr 4fr / 1fr 4fr;
  max-height: 100vh;
  margin: 0;
}

I’m not sure if one of the other CSS properties I have might be affecting this? The codepen is at https://codepen.io/dkxp/pen/yLRVQNM. Thanks!

Tags:

2

Answers


  1. 0

    Your CSS is good. Usually, in this situation, the vertical scroll is introduced because of a child element. I would recommend that you comment out all of the child elements and then uncomment them one-by-one to see which element(s) caused the vertical scroll to be introduced.

    Login or Signup to reply.
  2. 0

    I think you need to remove all properties from body…you can create this new section for grid properties.
    May be this is a best way to do this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search