如何使用 Angular Material 创建粘性页脚和页眉答案

【问题标题】：How to create a sticky footer & header with Angular Material如何使用 Angular Material 创建粘性页脚和页眉
【发布时间】：2019-11-16 16:11:48
【问题描述】：

我正在尝试使用 angular-material 8 创建一个网页。这个想法是页眉和页脚都应该是粘性的，内容应该填满页面的其余部分。 A，对我来说，标准的应用程序页面。

尽管谷歌搜索我没有成功。建议、版本等太多，没有人适合我，所以在这里寻求帮助。

首先，这是我的 index.html 和相应的 style.css

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    

    <title>Angular 7 User Registration and Login Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body class="body">
    <app>Loading...</app>
</body>

</html>

---------------------------



.body {
  background: black;
}

然后我就有了应用程序组件。

--------------------------

<div  class="page">

<app-navigation class="header" ></app-navigation>
 

<router-outlet class="content"></router-outlet>

 
<app-footer class="footer" ></app-footer>
</div>


---------------------------

.page {
    margin: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: yellow;
  }


  .content { 
    width: 100%;
    background:salmon;
  }

.footer, header{
    flex: none;
    width: 100%;
    margin: auto auto 0 auto;
    background:gray;
}

-----------------------------

此代码在 chrome 浏览器中给出以下结果。

请注意滚动条。似乎页眉、内容和页脚大于浏览器中的可用区域。怎么来的？？

另外，请注意黑色区域。黑色来自“身体”类。怎么看得出来？？不应该被“page”类覆盖吗？

我真的非常希望能得到一些帮助。

【问题讨论】：

您能否将您的应用程序添加到stackblitz.com，这样会更容易解决您的问题

标签： angular-material

【解决方案1】：

将此添加到您的身体以隐藏黑屏。似乎你的身体默认得到了填充；

body{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 height: 100vh;
}

第二次从您的页面中删除 min-height: 100vh; 并将 height: 100vh; 添加到您的 body 类中，我想这将解决您的问题。

【讨论】：

不幸的是，我注意到另一个问题。如果我将文本添加到内容组件并缩小浏览器页面，页脚会保持粘性，直到达到“添加”的文本，然后它会“浮动”（与此页面上的行为相同）。我原以为内容会显示滚动条，但页脚和页眉仍然可见。
如果您在在线编辑器上添加代码，我可以尝试解决此问题
所以您希望您的页眉和页脚始终保持粘性，并且只有内容可以滚动，对吗？
查看您的代码。我已经修复了stackblitz.com/edit/angular-knunti
不是我想要的。如果您缩小浏览器窗口，直到页脚到达“内容”中的文本，页脚就会变成浮动的。浏览器已启用整个页面的滚动条。 --- 我只想为内容组件启用滚动条，并且页脚仍然应该可见。页脚永远不应该消失。