How to adjust the site height?

Question

css

https://moydon.ru/
it is necessary that for any screen extension the page height should be without scrolling. Now everything is fine on large screen extensions, but on smaller ones, the pages do not fit.
How to do it right? Under which extensions to write media queries.

Answer 1

It is best to split according to the standard screen extensions into several groups, similarly to how it was done in bootstrap in width ( https://bootstrap-4.ru/docs/4.1/layout/overview/)
Then it will be easier to fit everything into this breakdown in height pages and design elements for
example:
A block at the top of the main page, for example with a menu or a main slogan, should look nice with a different font, indent and width - it will look something like this:

@media screen and (max-height: 600px) { 
  .div{
    font-size:10px;
    height:40px;
    margin-top:30px;
  }
}
@media screen and (min-height: 600px) and (max-height: 768px) { 
  .div{
    font-size:10px;
    height:50px;
    margin-top:50px;
  }
}
@media screen and (min-height: 768px) and (max-height: 960px) { 
  .div{
    font-size:14px;
    height:100px;
    margin-top:70px;
  }
}
@media screen and (min-height: 960px) and (max-height: 1024px) { 
  .div{
    font-size:16px;
    height:150px;
    margin-top:100px;
  }
}
@media screen and (min-height: 1024px) { 
  .div{
    font-size:18px;
    height:180px;
    margin-top:150px;
  }
}

As a rule, in order not to be confused with blocks floating in height, they are made: position:absolute; width:100% and give them top or margin-top and inside they make a container with a floating width and margin: 0 auto; . Under these blocks, as a rule, they make divs with a background image in the size of the screen

section {
  position:absolute;
  width: 100%; /* ширина секции равна ширине области просмотра */
  height: 100vh; /* высота секции равна высоте области просмотра */
}

From the important: do not be lazy to write screen so that these rules apply only to screen layout and make a separate print version at the end with a completely different design for A4;)
Here is an example of breaking blocks in height (header on the main page) https://cf-dynamite. en/
If there are not many elements floating in height (for example, some text calling for action and a button on the background of a full-screen image), then you can use percentages of the screen height height: XXXvh; and distribute the elements in relative blocks within the screen size block.

Answer 2

Reduce padding and everything