如何防止页面的较低内容部分在任何移动设备上进行cliiping

Question

我正在离子页面上绘制一个叠加层，它是在离子内容结束后我评论的地方之后开始的。

我面临的问题是我的设备上看不到箭头所在的下半部分 - 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文件中，这将添加垂直滚动。