Split screen into two individual equal parts ionic 3 - html

Question

At the moment, they aren't equal:
<div class="homescreen-content" scroll="false">
<h2>Top</h2>
ITEM 1
<hr>
<h2>Bottom</h2>
ITEM 2
</div>
I want to split the screen equally, and want it to be responsive and centred.
Is there a way to do it with SplitPane?

Answer 1

.homescreen-content {
height: 100%;
display: flex;
}
.split {
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.test1 {
left:0;
height: 55%;
width: 100%;
background-color: $white-love;
border-bottom: 2px solid;
}
.test2 {
left:0;
top: 55%;
height: 50%;
width: 100%;
background-color: $white-love;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
This is may work:
<div class="homescreen-content" scroll="false">
<div class="split test1">
<div class="centered">
<h2>TEST1</h2>
</div>
</div>
<hr>
<div class="split test2">
<div class="centered">
<h2>TEST</h2>
</div>
</div>
</div>

Answer 2

You can do it with the Flexbox:
body, hr {margin: 0}
.homescreen-content {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100vh; /* 100% of the viewport height */
}
.homescreen-content > div {
display: flex;
justify-content: center; /* horizontally centered */
align-items: center; /* vertically centered */
flex: 1; /* each stretches and takes equal height of the parent (50vh) */
}
<div class="homescreen-content" scroll="false">
<div>ITEM 1</div>
<hr>
<div>ITEM 2</div>
</div>

Answer 3

Try this html and CSS
body , html {
height: 100%;
}
.container {
height: 100%;
}
.upper {
border-bottom: 2px solid;
height: 50%;
}
.lower {
height: 50%;
}
<div class="container">
<div class="upper">
<h2>Top</h2>
ITEM 1
</div>
<div class="lower">
<h2>Bottom</h2>
ITEM 2
</div>
</div>