Question

我的离子含量充满div。当屏幕尺寸大于div内容时，这非常有用。如果它较小，则它指定视图的高度，而向下滚动时，它不会填充全部内容。在以下示例中可以看到：

这基本上是html：

<ion-header>
  <div id="headerTab" [class]="loginStyle">
  <ul style="justify-content: center; display: flex;" class="tabs z-depth-1">
    <li class="tab col"><a (click)="setTabIndex(0)" class="active" href="#enter">ENTRAR</a></li>
    <li class="tab col"><a (click)="setTabIndex(1)" href="#signup">REGISTRO</a></li>
  </ul>
  </div>
</ion-header>

<ion-content>
  <div id="background" [class]="loginStyle" style="margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center;">

        <div class="valign-wrapper center-align tabs-content" *ngIf="loginTabVisible" [@showAnimation] (@showAnimation.done)="reloadTabs()">

          <form *ngIf="loginVisible" [@showAnimation] (@showAnimation.done)="reloadLoginPage()">

            <div class="row">
              <div class="input-field col s12">
                <input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
                <label for="correo">Email</label>
              </div>
              <div class="input-field col s12">
                <input id="pass1" type="password" class="validate" [(ngModel)]="userPassword" name="userPassword">
                <label for="pass1">Contraseña</label>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a class="btn bg_color_s" (click)="login()">Continuar</a>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a (click)="setLoginPageIndex(1)" class="">¿Olvidaste tu contraseña?</a>
              </div>
            </div>

          </form>

          <form *ngIf="resetPasswordVisible" [@showAnimation] (@showAnimation.done)="reloadLoginPage()">

            <div class="row">
              <div class="input-field col s12" style="color: #fff">
                <p> Por favor, introduzca su correo. Le enviaremos un email con insrucciones para restablecer su contraseña </p>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
                <label for="correo">Email</label>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a class="btn bg_color_s" (click)="login()">Recuperar contraseña</a>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a (click)="setLoginPageIndex(0)" class="">Volver al inicio de sesión</a>
              </div>
            </div>

          </form>

        </div>

        <div class="center-align tabs-content" *ngIf="registerTabVisible" [@showAnimation] (@showAnimation.done)="reloadTabs()">

          <form *ngIf="registerVisible" [@showAnimation] (@showAnimation.done)="reloadRegisterPage()">

            <div class="row">
              <div class="input-field col s12">
                <input name="newUser.firstName" [(ngModel)]="newUser.firstName" id="first_name" type="text" class="validate">
                <label for="first_name">Nombres</label>
              </div>
              <div class="input-field col s12">
                <input name="newUser.lastName" [(ngModel)]="newUser.lastName" id="last_name" type="text" class="validate">
                <label for="last_name">Apellidos</label>
              </div>
              <div class="input-field col s12">
                <input name="newUser.birthday" [(ngModel)]="newUser.birthday" id="birthday" type="text" class="validate datepicker">
                <label for="birthday">Fecha de nacimiento</label>
              </div>
              <div class="input-field col s12">
                <input name="newUser.email" [(ngModel)]="newUser.email" id="correor" type="email" class="validate">
                <label for="correor">Email</label>
              </div>

              <div class="input-field col s12">
                <input name="password" [(ngModel)]="newUser.password" id="passr1" type="password" class="validate">
                <label for="passr1">Contraseña</label>
              </div>
              <div class="input-field col s12">
                <input name="passwordCheck" [(ngModel)]="passwordCheck" id="passr2" type="password" class="validate">
                <label for="passr2">Repita contraseña</label>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a (click)="signUp()" class="btn bg_color_s">continuar</a>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
              </div>
            </div>

          </form>

          <form *ngIf="proTypeVisible" [@showAnimation] (@showAnimation.done)="reloadRegisterPage()">

            <div class="row">
              <div style="width:90%;margin:auto">
                <p>
                  <label>
                    <input name="group1" type="radio" />
                    <span>Jugador Profesional</span>
                  </label>
                </p>
                <p>
                  <label>
                    <input name="group1" type="radio" />
                    <span>Campo de Golf/Pitch and putt</span>
                  </label>
                </p>
                <p>
                  <label>
                    <input name="group1" type="radio" />
                    <span>Tienda de Golf</span>
                  </label>
                </p>
                <p>
                  <label>
                    <input name="group1" type="radio" />
                    <span>Otros servicios relacionados</span>
                  </label>
                </p>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a href="login_pro_2.php" class="btn bg_color_s">continuar</a>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s12">
                <a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
              </div>
            </div>

          </form>

        </div>

  </div>
</ion-content>

问题可以总结为：

<ion-content>
<div style="height:100%; background-color: red">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>

Answer 1

问题是内容溢出了div。我们可以利用Type '(...args: TailParams<U[keyof U]>) => void' is not assignable to type 'TailFunc<U[keyof U]>'.来解决问题。

只需在容器div中添加以下属性：

overflow: overlay

用div填充离子含量

1 个答案: