Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates.
To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (header and footer). Additionally, there is an image background included in a separate div located above all other HTML elements within the body tag.
The structure of my page looks like this:
<body ng-controller="mainController">
<div id="background"></div>
<div id="navbar-override" ...> ... </div>
<div id="main" ng-view></div>
<div id="navbar-bottom-override" ...> ... </div>
</body>
My question now is: How can I ensure that the #main div always maintains the same height and width (full available h&w) across the entire page? Here is an illustration depicting how the #main div should interact with the rest of the content on the page.
P.S.: Below is the CSS for the html tag:
html {
height: 100%;
width: 100%;
padding: 65px;
}