css - 设置 Sticky Header + Footer + Router Outlet : Angular 2 + 高度的最佳方式是什么

Question

我想堆叠一个 Sticky Header + Router Outlet + Footer。我的问题是页脚不显示，路由器 socket 溢出或不显示。

我试过用

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

全部(最小高度:适合内容，最大高度:100vh，最小宽度:100vw)。

我还会在嵌套组件(router-outlet)中放一个容器到min-height: 100vh

这是我得到的输出(使用下面提供的建议:flex: auto; 显示: flex ； flex 方向:列；)。请注意，尽管 Position:absolute 和 bottom 0，页脚并没有粘在底部。

编辑:这不是页脚/容器问题。我使用的这个提议的方法在理论上是有效的。为相应的路由组件设置正确的 CSS 样式会影响路由器导出。

Answer 1

你可以试试 flex 布局。

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

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