如何在分屏中禁用 100vh 的滚动条？答案

【问题标题】：How to disable scroll bars in 100vh in split screens?如何在分屏中禁用 100vh 的滚动条？
【发布时间】：2023-11-24 13:28:01
【问题描述】：

这是我的登录表单。我正在使用素数。我使用 100vh 作为全高。我使用 flex 来显示垂直和水平居中的内容。我为每列提供 100% 的高度。问题是打字时出现横竖滚动条。我想隐藏滚动条。

<div class="p-grid" style="height: 100vh">
  <div class="p-col-12 p-sm-12 p-md-6 p-lg-6" style="height: 100%">    
    <h4>Logo</h4>
  </div>

  <div
    class="p-col-12 p-sm-12 p-md-6 p-lg-6"
    style="background-color: #f1f1f2; height: 100%"
  >
    <div>
      <form [formGroup]="loginForm">
        <h4>LOGIN</h4>

        <!--Phone Starts-->

        <div>
          <p>Phone</p>

          <input type="email" formControlName="phone" size="50" pInputText />
        </div>

        <p-message
          severity="error"
          text="Phone no. is required"
          *ngIf="loginForm.get('phone').errors?.required && formSubmitted"
        ></p-message>

        <p-message
          severity="error"
          text="Please enter valid phone no."
          *ngIf="loginForm.get('phone').errors?.pattern && formSubmitted"
        ></p-message>

        <!--Phone Ends-->

        <div class="p-mt-3"></div>

        <!--Password Starts-->

        <div>
          <p>Password</p>

          <input
            type="password"
            formControlName="password"
            size="50"
            pInputText
          />
        </div>

        <p-message
          severity="error"
          text="Password is required"
          *ngIf="loginForm.get('password').errors?.required && formSubmitted"
        ></p-message>

        <p-message
          severity="error"
          text="Please enter a password with 6 characters"
          *ngIf="loginForm.get('password').errors?.minlength && formSubmitted"
        ></p-message>

        <!--Password Ends-->

        <div class="p-mt-3"></div>

        <p-button
          label="Login"
          styleClass="ui-button-success"
          (click)="onSubmit()"
        ></p-button>
      </form>
    </div>
  </div>
</div>

.p-col-12,
.p-sm-12,
.p-md-6,
.p-lg-6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

在表单中输入时，滚动条会出现和消失。

【问题讨论】：

你为什么要混合 vh 和 %.坚持其中之一并检查

标签： css angular flexbox primeng

【解决方案1】：

在您的 div 上设置 overflow-x: hidden; 以解决问题。

如果您也想隐藏垂直，请使用：overflow-y: hidden;

也不要在vh 和% 之间混用。决定一个并坚持下去。

短篇小说

.p-grid{
    overflow-x: hidden; //Horizontal
    overflow-y: hidden; //Vertical
}

【讨论】：