html/css how to calculate margin-top to be 100vh - block height - html

Question

A html section (content + top margin) should take up whole viewport.
There is no other margins except top. Section is not going to have much content in it
This could be achieved by setting something like
height:60vh
margin-top:40vh
But the problem is, section height may change due to viewport width change or content amount
So i need some solution for margin to be calculated automatically. Something like margin-top: 100vh-height.
Context
there is bunch of sections directly in body that are located vertically, some of them should be like i described ( a horizontal line that takes 1/3 - 2/3 of vp height, some of them take 100vh and don't have a vertical margins.
body have a
display:flex;
flex-direction:column;
on it
Notes
I know that it is possible to do by
1) Wrapping everything in unnecessary level of divs
2) Using js
But I want to avoid those solutions and keep html as minimalistic as possible. So I need a way to calculate margin or other changes to css to achieve this (suggestions about changing approach to layout in general (but only css) are welcome)
clarifying image
body { display:flex; flex-direction:column;}
body > section { min-height:vh; margin:0; background-color: #e13652;}
.sectionHorizontal { min-height:10em; margin-top:60vh; }
<section class="sectionHorizontal">
<p> horizontal section with some content, it should take part of a viewport and the rest should be filled by margin </p>
</section>
<section>
<p> another section. but this one takes 100% of viewport</p>
</section>
<section class="sectionHorizontal">
<p> another horizontal section, that have more content and is higher than the first one</p>
</section>
More notes
I'm asking not how to make a section 100vh but how to make section + empty space before it =100vh. Or how to move stuff inside it
I wanted to keep example as simple as possible, but actually section has background and itself may contain not only one but several different elements that have their own positioning

Answer 1

I'm still not sure if I understand your problem correctly or not, but have a look at the following. If you can clarify further, that'd be helpful.
section {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: flex;
flex-direction: column;
height: 100vh;
}
section.horizontal {
justify-content: flex-end;
}
<section class="horizontal">
<p> horizontal section with some content, it should take part of a viewport and the rest should be filled by margin </p>
</section>
<section>
<p> another section. but this one takes 100% of viewport</p>
</section>
<section class="horizontal">
<p> another horizontal section, that have more content and is higher than the first one</p>
</section>

Answer 2

Assuming your example code this would be the only way possible without changing the html.
* {
margin: 0;
padding: 0;
}
body {
display:flex;
flex-direction:column;
}
section {
margin-top: 100vh;
height: 0;
}
section p {
background: #ccc;
transform: translateY(-100%);
}
section:not(.sectionHorizontal) p {
height: 100vh;
}
<section class="sectionHorizontal">
<p> horizontal section with some content, it should take part of a viewport and the rest should be filled by margin </p>
</section>
<section>
<p> another section. but this one takes 100% of viewport</p>
</section>
<section class="sectionHorizontal">
<p> another horizontal section, that have more content and is higher than the first one</p>
</section>