设置粘性页眉+页脚+路由器出口的高度的最佳方法是什么：Angular 2 +

Question

我想堆叠一个粘性页眉+路由器插座+页脚。我的问题是页脚不显示，并且路由器出口或者溢出或也不显示。

我尝试使用

<div class="container" style="position=relative">
    <header style="position:absolute"></header>
    <router-outlet style="position:absolute></router-outlet>
    <footer style="position:absolute></footer>
</div>

全部（min-height: fit-content，max-height:100vh，min-width: 100vw）。

我还将在嵌套组件（路由器出口）中将一个容器放入min-height: 100vh

以下是我所得到的结果（使用下面提供的建议：flex：auto;   显示：flex;   flex-direction：column;）。请注意，尽管Position：absolute和bottom 0，页脚也不会粘在底部。

Answer 1

您可以尝试弹性布局。

flex: auto;
display: flex;
flex-direction: column;

可以设置页眉和页脚的高度。