I wanted to create a container or a secção that automatically adjusts to the size of the height and width of the screen, which even when resized the secção suits the size of this, followed by another type of content just below .
I'm looking for something like the example of these sites below:
This can be done by using the vh unit, adding height: 100vh; to the class so that its size is automatically adjusted to 100% of the current screen size on any device or resolution
With vh/vw , we can modify the size of elements to be relative to the size of the viewport (window). So by adding height: 100vh will cause an element to occupy the full height of the viewport altogether.
Here's an example:
section {height: 100vh;}
/* Seccões */
#screen1 {background: #43b29d;}
#screen2 {background: #efc94d;}
#screen3 {background: #e1793d;}<section id="screen1"></section>
<section id="screen2"></section>
<section id="screen3"></section> You can also test this in Example in JsFiddle and drag the window of resultado so you can see that section/div fits any type of resolution.
You can read more about the vh drive in Sizing with vw and vh units