HTML, Body height 100% does not work

Have you tried to add the following css and set Important attribute

html, body { height: 100% !important }

What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.

But in case of your content area, that is relative to the ng-view div.

I would recommend you to make it 100% height. Something like:

div[ng-view]{     height: 100%;}

This most likely is because of the fact that in CSS the 100% is a relative value.

With width the default 100% is the width of the screen, or whatever you are looking at.

Height however does not take the height of the screen as 100%. It needs a solid value.

I think that if you change

html, body {    background: transparent;    height: 100%;    margin: 0;    padding: 0;    }

with

html, body {    background: transparent;    height: 100vh;    margin: 0;    padding: 0;    }

it should work.

The 100vh should set the height of the html to the height of the viewport.

I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.