how to set full page width and height ?

how to set full page widht and height ? i have been told that using
body {
width: 100%;
min-height: 100vh;
margin: 0;
}
body {
width: 100%;
min-height: 100vh;
margin: 0;
}
this is not correct all the time ? can someone explain me this pls
6 Replies
Chris Bolson
Chris Bolson2y ago
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.
indee
indee2y ago
so what is the correct solution for a responsive page ? or will grids help here
Chris Bolson
Chris Bolson2y ago
Kevin released a video about this a couple of months ago https://youtu.be/veEqYQlfNx8
indee
indee2y ago
will grid help in any way ?
Chris Bolson
Chris Bolson2y ago
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)
13eck
13eck2y ago
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.
Want results from more Discord servers?
Add your server