angular 4 中的 Flex 布局问题 tablets/mobiles

Question

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

但是当涉及到选项卡时 size.It 不适合 screen.I 的全高已经尝试了很多 css 属性仍然没有 use.Unable 配置属性是最重要的。

她的是制表符大小的屏幕截图

这是我的 html 代码（登录-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（登录-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（没有 angular）：

<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>

希望对您有所帮助，这就是您想要达到的效果:)

angular 4 中的 Flex 布局问题 tablets/mobiles

Flex layout issue tablets/mobiles in angular 4

angular-flex-layout

angular