How to make a header static under dynamic condition.

To make a header static under dynamic condition (When height of the header changes for different screen widths).

The css properties need to given for the header div :

header#site-header {
	z-index: 9;
	position: fixed;
	width: 100%;
	background-color: rgb(255, 255, 255);
}

For example :

If the height of header is fixed then we can give static padding-top to the main-container but the height of header varies at different screen-widths so to overcome this situation we need to provide padding-top dynamically to the main-container also for resize. So, for this we need to extend header or footer view as it is available in all the pages.

{
		'use strict';
		return {
			mountToApp: function mountToApp(container) {
				var layout = container.getComponent('Layout');
				if (layout) {
					//This function is used to create childview for the FooterView
					layout.addChildView('FooterDetails', function () {
						//This function is used provide padding top for the container when the screen width is resized.
						window.addEventListener("resize", function (w) {
							var siteHeaderHeight = document.getElementById('site-header').offsetHeight;
							document.getElementById('main-container').style.paddingTop = siteHeaderHeight + 'px';
						});
						//This function is used provide padding top for the main-container when the page is newly opened.
						$(document).ready(function () {
							var siteHeaderHeight = document.getElementById('site-header').offsetHeight;
							document.getElementById('main-container').style.paddingTop = siteHeaderHeight + 'px';
						});
						return new FooterView({ container: container });
					});
				}
			}
		};
	});

The first function will help to provide padding-top dynamically when the user resize the page.

The second function provides padding-top to the main-container on the page reload.