Question

我正在尝试使用角材料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”类不应该涵盖吗？

我真的非常感谢您的帮助。

Answer 1

将此添加到您的身体以隐藏黑屏。似乎您的身体默认情况下处于填充状态； </ p>

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

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

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

1 个答案: