如何防止页面的下部内容部分在任何移动设备上被剪切

Question

我正在 ionic 页面顶部绘制一个叠加层，该叠加层在 ion-content 结束后我评论的地方开始。

我面临的问题是箭头所在的下部在我的设备上不可见 - moto x play。那么如何自动添加滚动条，或者覆盖页面如何响应适应任何高度的屏幕尺寸？

我已经在图表中绘制了页面结束的剪辑部分。

.html

.ionic-overlay {
  .any-border {}
  .text1 {
    text-align: left;
    font-size: 24px;
    margin-top: 55px;
    margin-left: 15px;
  }
  .welcome-text2 {
    text-align: left;
    font-size: 20px;
    line-height: 23px;
    padding-top: 14px;
    margin-left: 15px;
  }
  .hello-text {
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
    padding-bottom: 150px;
  }
  .middle-content {
    display: flex;
    justify-content: space-between;
    .find-name {
      margin-left: 15px;
    }
    .center-text {
      laign-self: flex-end;
      margin: auto 0;
    }
    .search {
      margin-right: 15px;
    }
  }
  
  .lower-page-content {
      display: flex;
      justify-content: space-between;
  }
  
  .lp-content1 {
    margin-left: 30px;
  }
  
  .lp-content2 {
    margin-right: 30px;
  }
  
}

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

<!-- main overlay part begins from here -->

<div class="ionic-overlay">

  <div class="any-border">
    <div></div>
  </div>
  <div class="text1">Text1</div>
  <div class="welcome-text2">Welcome text2</div>
  <div class="hello-text">Hello</div>

  <div class="middle-content">
    <div class="find-name">Find what is your name?</div>
    <div class="search">Seacrch<br>Name</div>

    <div class="center-text">Center text
      <div>

        <div class="middle-content1">
          <div class="find-name1">Find what is your name1?</div>
          <div class="search1">Seacrch<br>Name1</div>
        </div>

        <div class="lower-page-content">
          <div class="lp-content1"></div>
          <div class="lp-content2"></div>
          
         <!-- some more elements will come here -->
          

        </div>


      </div>

.css

Answer 1

  overflow-y: scroll;

将此添加到您的 css 文件中，这将添加垂直滚动。