Question

这是我在笔记本电脑上的登录页面

但是在选项卡大小方面。它不适合屏幕的整个高度。我尝试了许多css属性，但仍然没有用。无法配置覆盖哪个属性。

她是标签大小的屏幕截图

这是我的html代码（login-page.component.html）

    <!doctype html>
    <html>
       <head>
       </head>
       <body> 

          <div class="ylet_header">
              <p class="ylet_business">MY Business</p>
          </div>

            <div class="container" fxLayout="row" fxLayout.xs="column" 
                            fxLayoutWrap fxLayoutGap="0%">

                 <div fxFlex="76%" class="left-sidebar">
                     <img id="ylet_img" src="assets\img\ylet_1.jpg">
                 </div>  
                 <div fxFlex="25%" style="background-color:pink;"  id="Login- 
                      form">
                       <p class="login" align="left">Login</p>

                         ...Login page content goes here.....

                      <router-outlet></router-outlet>
                  </div>

            </div>


       </body>
    </html>

和CSS（login-page.component.css）就像这样

    .login {
       color: #cc00cc;
       font-size: 20px;
       margin-top: 80px;
     }
    .ylet_header {
       background-color: #990099;
       height: 45px;
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
     }
   .ylet_business {
      color: #ffffff;
      font-size: 18px;
      text-align: left;
      text-indent: 5%;
      margin-top: 11px;
   }
  .left-sidebar {
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
   }
 .left-sidebar img {
    min-width: 100%;
    margin-left: -16px;
    background-size: cover;
   }
  .forget-sec {
    bottom: 0;
  }
  .ms-TextField-field {
   margin-left: -12px !important;
   }
  @media (max-width: 600px) {
   .left-sidebar {display: none;}
   }

另一个问题是，我要在底部对齐忘记密码，每个设备都固定该密码。

Answer 1

因此，在我的评论中，我的意思是以下示例。

使用以下代码扩展CSS：

   .container {
     display: flex;
     height: 100vh;
   }

   #ylet_img {
     background-image: url(https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg);
     height: 100%;
     background-size: cover;
     background-position: center;
   }

稍微简化了html，因为我在这里使用纯CSS（无角度）：

<html>
   <head>
   </head>
   <body> 

      <div class="ylet_header">
          <p class="ylet_business">MY Business</p>
      </div>

        <div class="container" >

             <div style="flex: 0 0 75%" class="left-sidebar">
             <div id="ylet_img"></div>
             </div>  
             <div style="flex: 0 0 25%" style="background-color:pink;"  id="Login- 
                  form">
                   <p class="login" align="left">Login</p>

                     ...Login page content goes here.....

                  <router-outlet></router-outlet>
              </div>

        </div>
   </body>
</html>

我希望它会有所帮助，这就是您想要实现的效果：）

角版4中的Flex布局问题平板电脑/手机

1 个答案: