How to make adaptive blocks occupy 100% vp?

Question

css

Good evening, colleagues.
Please help me understand the concept and choose the right approach.
Given: One page consisting of two visual blocks - the main image and content.
Need: create a page so that on any device there would be a clear display in full screen (when loading) first of the main picture, and when scrolling down completely, the content section is displayed in full screen.
Question: How to implement this in bootstrap? Is it ok to set row sections to 100% height and body/container to 200% height? Are there any alternatives to this approach? And what's the best practice in creating one-page sites - sheets, in which sections are not bloated with content, but they just need to be manually stretched?
Thank you!

Answer 1

I implemented it as follows:
we put 2 blocks on the page

<div class="container-fluid">
</div>
<div class="container-fluid">
</div>

Each container-fluid is styled height:100%
Implementation example zapraudu.info/referendum

Answer 2

In bootstrap you create a block with a class container-fluidinside it a block with a class rowand inside it a block with a class col-xs-12
and the last block will be full screen, at any size