50% height divs stacked as rows - html

Question

I have 2 divs that have a height of 50% stacked as a row, on a page that is split into 2 colours.
However on smaller screens the user needs to scroll, which breaks the design. I want the two 50% divs to fill the entire webpage.
.first-50 {
height: auto;
width: 100%;
background: red;
position: relative;
color: #fff;
min-height: 50%;
}
.second-50 {
min-height: 50%;
height: auto;
width: 100%;
background: blue;
position: relative;
display: none;
}
<div class="height-50 first-50">
text
</div>
<div class="height-50 second-50">
text
</div>
Thank you

Answer 1

Here is a quick example that works in the limited scenario I tested it for.
With relative positioning, it is only going to fill as much space as it needs. You probably need absolute positioning/sizing to force it to fill the regions you require. However, note the other elements on your page (typically relative or the default static positioned) will not be aware of them at all, and will simply overlap them or whatever.
So if you are looking for just a background thing where it always fills 50%/50% regardless of the content on top, this absolute positioning approach could suffice. If you need these two areas to follow the flow of the page and respect elements around them, then it will not.
body {
height: 100%;
min-height: 100%;
}
.first50 {
background: red;
color: #fff;
}
.second50 {
top: 50%;
background: blue;
color: #fff;
}
.height50 {
height: 50%;
min-height: 50%;
width: 100%;
position: absolute;
}
<div class="height50 first50">
text
</div>
<div class="height50 second50">
text
</div>

Answer 2

To expound upon a previous user's answer, using vh is a way of getting the height of the device with near perfect support in modern browsers. You can split the two divs into 50vh and it will resize accordingly. CCS-Tricks has some more info on this topic!
.first-50 {
height: 50vh;
width: 100%;
background: red;
position: relative;
color: #fff;
}
.second-50 {
height: 50vh;
width: 100%;
background: blue;
position: relative;
}
<div class="height-50 first-50">
text
</div>
<div class="height-50 second-50">
test
</div>

Answer 3

You can use the vh to adjust the height when the viewport resizes
quote from w3schools.com
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
div {
height: 50vh;
width: 100%; /* or width : 100vw */
}
and add what ever you want to it