Я пытаюсь создать веб-страницу, используя angular-материал 8. Идея состоит в том, что верхний и нижний колонтитулы должны быть липкими, а содержимое должно заполнять остальную часть страницы.А, для меня, стандартная страница приложения.
Несмотря на поиск в Google, у меня ничего не получилось.Слишком много предложений, версии и т. Д., И никто не работает для меня, поэтому я прошу помощи здесь.
Для начала, это мой 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"?
Я действительно, очень буду признателен за помощь.