A sticky footer sticks to the bottom of a web page regardless of how much content the footer has. This is a solved problem if you use FlexBox commands in the web page's CSS stylesheet. All modern browsers support FlexBox.
However, using Angular2 to build a web app, I am unable to apply the simplest of the FlexBox commands! The footer does not stick to the bottom! Here's my plunker to demonstrate the issue.
In the plunker app, style.css contains a very simple Flexbox commands and it works - just simply replace the content of index.html with index1.html and see how the sticky footer is working great without Angular being present. With Angular2 app, I am using the same style.css so I added the the following template to the app, clearly marking the CSS classes main and footer as follows.
<div class="main">
<h2>Hello {{name}}</h2>
</div>
<footer class="footer">
<h3> this is footer </h3>
</footer>
However, the footer never sticks.
Has anyone been able to solve this issue in Angular2? Does Angular2 have another way to provide sticky footer?
Any thoughts and ideas would be greatly appreciated.
Your problem is that you are defining the site div as the flex container and targeting footer as a flex item, but when you introduce the angular my-app element, footer is no longer a child of site (it is a child of my-app and thus a grandchild of site).
flex items need to be children of the flex container.