html - 将屏幕分成两个独立的相等部分 ionic 3

Question

目前，它们不相等:

<div class="homescreen-content" scroll="false">
  <h2>Top</h2>
  ITEM 1
  <hr>
  <h2>Bottom</h2>
  ITEM 2
</div>

我想平均分割屏幕，并希望它能够响应并居中。 有没有办法用 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>