代码之家 › 专栏 › 技术社区 › Aditya

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

ionic-framework css html

Aditya · 技术社区 · 8 年前

我在爱奥尼亚页面的顶部绘制了一个覆盖图,它从我在爱奥尼亚内容结束后发表评论的地方开始。

我面临的问题是,箭头所在的下部在我的设备moto x play上看不到。那么,滚动条是如何自动添加的,覆盖页又是如何在任何高度的屏幕大小上响应ir的呢?

我在图表中画出了这一页结尾处的裁剪部分。

.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