直接看代码
//html代码
<div 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;/*横向*/
/*flex-direction: row;纵向*/
}
main{flex: 1;}
header{background-color: #cccccc;}
footer{background-color: #cccccc;}
最终效果: