how to set full page width and height ?
how to set full page widht and height ?
i have been told that using
this is not correct all the time ?
can someone explain me this pls
6 Replies
By default body has 100% width so you don’t need that line unless you have modified it previously. The issue with the height is that the viewport height can change as the user scrolls. To be more precise, on mobile devices, certainly iOS, the viewport increases as the browser navigation bar is hidden when you scroll the page.
so what is the correct solution for a responsive page ?
or will grids help here
Kevin released a video about this a couple of months ago https://youtu.be/veEqYQlfNx8
will grid help in any way ?
I can’t see how that would be any different. In Kevin’s video he explains how to do this. Basically you have two alternative units : “dvh” (dynamic viewport height) and “svh” (smallest viewport height)
You should be letting the content dictate the height (and width, to some degree) and not setting fixed values. What's your use case? Why do you want to set explicit width/height?
As Chris mentioned, all block-level elements (of which
body
is one) have a width of 100%, so setting it here is redundant. And the default height of block-level elements is auto
, so the content decides how tall the element needs to be.