我创建了一个这样的 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>
但是 View 应该是这样的
我做错了什么？
最佳答案
这将使您的底部展开以填满整个屏幕:
.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;
}
}
关于html - 如何在 Angular 中设置我自己的 CSS 和 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43291751/