不管页面怎么变,main模块布满页面:
html代码
<div id="app" class="site">
<header>
<app-header></app-header>
</header>
<main></main>
<footer>
<app-footer></app-footer>
</footer>
</div>
css代码
html, body, app-root, .site{
width: 100%;
height: 100%;
margin: 0;
}
.site{
display: flex;
flex-direction: column;
}
main{
flex: 1;
}
header{
background: red;
}
footer{
background: green;
}