Are the height and width set correctly in the initial markup of the code?

Question

css

Am I doing the markup correctly in terms of setting the height and width of the main elements, so that in the future the layout is adaptive, and with a lower screen resolution or a narrower browser window, all blocks become one column and there is no scrollbar.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100%;
min-height: 100vh; /*To pinch the footer*/
}
/*Then for a generic div that has absolutely all of the content*/
.wrapper{
width: 100%;
max-width: 900px /*depending on the specified layout width*/
}
I try to make subsequent blocks located in a div with the wrapper class, such as header, main, nav, content, menu, aside, footer, with the following construction:
for example:
main{
width: 100%;
max-width: 800px /*relative to layout of course*/
height: 100%;
min-height: 200px /* I also take the minimum height from the layout (I measure it) */
}
And in this vein, all the remaining elements div, span, etc. Just for the header and footer, just set the width to 100% and that's it.
At the end, I make more media queries, and include css in the code: reset.css and normalize.css.
Can you please tell me how it is correct and correct? Thanks in advance for your replies!

Answer 1

All height: 100% are very unpredictable