Why do we set the body width to 100% and height to 100vh? This doesn’t seem to accomplish anything. Isn’t 100% width already the default behavior of body? I don’t see how setting the height to 100vh makes any difference to the page either.
Do you think they were doing this just to demonstrate how the body has default margins, and about those scrollbars that popped up due to the margin? Or is there actually a reason that we would want to set the body size this way in the real world, on our own projects?
You’re right about the body width. It will automatically take up the entire width of the view port so I don’t think it is necessary to set it to 100%.
And in this case I think you are correct about the body height as well. I believe the html element will automatically assume the background color set on the body so you don’t need to set the body height to 100vh to get the background color to fill the entire page. And I can’t seem to find any other reason why you would need to set the body height for this page.
So I would say that neither of these properties needs to be set on the body for this project. As to why they are, I don’t know. Perhaps someone who has more knowledge of how this project was put together will chime in.
Okay cool, thanks so much for your input! It’s good to know I’m not the only one who thinks those properties are unnecessary.
Hm, I guess I would need to go to the main fCC forum and ask over there if I want to find someone who knows why the instructions were written that way.
I don’t know if you ever got an answer to your question, but the reason for this is likely to teach new devs how a typical HTML document is structured.
By explicitly specifying the dimensions of the body, you become aware of the relationship between website content and the viewport. This is an important consideration when developing responsive apps or complex websites and it’s good to start early.
Furthermore, explicitly defining default values is often a good practice across programming languages. We might not have to worry about the width because the body is a block element, but we need to take care of the height to guarantee consistent behavior across browsers and declare your intentions for anybody else reading your code.
The way you set the height is vitally important to all the elements in the body and how the page will render.
