CODEWITHSUNDEEP
angular-material
lg.lindstrom
lg.lindstrom

Reputation: 856

How to create a sticky footer & header with Angular Material

I am trying to create a web page using angular-material 8. The idea is that both the header and the footer should be sticky and content should fill rest of the page. A, for me, standard application page.

Despite googling I have not succeeded. Too many suggestions, version, etc, and no one works for me, so I am asking for help here.

To start, this is my index.html with corresponding 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;
}

Then I have the application component.

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

<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;
}

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

This code gives the following result in a chrome browser.enter image description here

Please notice the scrollbar. It seems that header, content, and footer are bigger than the available area in the browser. How come??

Also, notice the black area. Black is from the "body" class. How come it is visible ?? Should it not be covered by the "page" class?

I really, really would appreciate some help here.

Upvotes: 3

Views: 4664

Answers (1)

Irin
Irin

Reputation: 1276

add this to your body to hide that black screen. seems your body is getting a padding by default;

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

2nd remove min-height: 100vh; from your page and add height: 100vh; to your body class i guess this will solve your problem.

Upvotes: 1

Related Questions