Question

我创建了一个像这样的login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector:'',
    templateUrl:'./html/login.html',
    styleUrls:['./resources/css/reset.css','./resources/css/style.css','./resources/css/invalid.css']
})

export class LoginComponent{
    constructor(){
        this.loginImagePath = './app/resources/images/';
    }
    OnInit(){

    }
}

这是我的app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {  }

这是我的login.html

    <body id="login">

        <div id="login-wrapper" class="png_bg">
            <div id="login-top">

                <h1>Simpla Admin</h1>
                <!-- Logo (221px width) -->
                <img id="logo" [src]="loginImagePath +'logo.png'" alt="Simpla Admin logo" />
            </div> <!-- End #logn-top -->

            <div id="login-content">

                <form action="index.html">

                    <div class="notification information png_bg">
                        <div>
                            Just click "Sign In". No password needed.
                        </div>
                    </div>

                    <p>
                        <label>Username</label>
                        <input class="text-input" type="text" />
                    </p>
                    <div class="clear"></div>
                    <p>
                        <label>Password</label>
                        <input class="text-input" type="password" />
                    </p>
                    <div class="clear"></div>
                    <p id="remember-password">
                        <input type="checkbox" />Remember me
                    </p>
                    <div class="clear"></div>
                    <p>
                        <input class="button" type="submit" value="Sign In" />
                    </p>

                </form>
            </div> <!-- End #login-content -->

        </div> <!-- End #login-wrapper -->

  </body>

但观点应该是这样的

我做错了什么？

Answer 1

这将使您的底部展开以填满整个屏幕：

.png_bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.png_bg > * {
  flex-grow:0;
}
#login-content {
  flex-grow: 1;
}

如果您打算将此布局重新用于其他页面，则可以考虑对顶部和底部使用一些类，并调整选择器以匹配它们。假设您将.top_bg和.body_bg放在它们上，您可能希望将其放入应用的.scss：

.png_bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .top_bg {
    flex-grow: 0;
    /* might consider adding a `min-height` to it, too */
  }
  .body_bg {
    flex-grow: 1;
  }
}

如何在Angular中设置我自己的CSS和HTML

1 个答案: