bash0ne bash0ne - 3 months ago 11
AngularJS Question

How to align div in body to stay with specific height and width

I am currently working on a single page application with angular-js. I have specific routes where I want to inject some new html templates.

To do this I created a container called with id #main which is located between two navbars (header and footer). In addition I have an image as background which is included in a seperate div above all other html elements in body.

So the structure 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>

My question now is: The #main div should always stay at the same height and width (full available h&w) over the whole page. I have a picture where I describe how the #main div should behave with the rest of the page. How can I achieve this alignment?

P.S.: This is the css of the html tag:

html {
height: 100%;
width: 100%;
padding: 65px;


Your #main div should natively stretch to the width of the screen (minus the 65px padding on each side coming from the html, although I would remove that padding and put it as margin on the #main since it looks like you want the header and footer to stretch full). If you want to force the height of #main to the screen height you should be able to set its height to 100vw minus the heights of your header and footer. If your header and footer are each 50px height:

#main {
  height: calc(100vw - 100px);
  padding-left: 65px;
  padding-right: 65px;