-1

Using static HTML I am able to achieve this putting height: 100% on the html element. I have read a bunch of similar issues on stackoverflow that talk about using the vh and min-height etc.. I haven't been able to get anything to work.

This is a working static page of what I want: https://stackblitz.com/edit/web-platform-esqhkb?file=index.html

When I put this same page in Angular the content is smashed between the header and footer:
https://stackblitz.com/edit/angular-fegvvw?file=src/app/app.component.html

How can I get my Angular layout to match that static layout?

Raymond Holguin
  • 1,050
  • 2
  • 12
  • 35
  • gotta figure out what your container is and give it a height for height 100% to work. Can do this with a number of things including vh, position absolute and inset 0. – async await Oct 27 '22 at 23:52
  • Not use height:100% else height:100vh. If you want 3 rows, 100% height layout, take a look this [SO](https://stackoverflow.com/questions/41679610/3-rows-100-height-layout-with-flexbox) – Eliseo Oct 28 '22 at 06:55

1 Answers1

0

Hi Raymond here's my solution Just try to change the css style from html file to css style file : https://stackblitz.com/edit/angular-hkbhhb?file=src%2Fapp%2Fapp.component.html,src%2Fstyles.css

Farouk Mhamdi
  • 311
  • 2
  • 8
  • This technically works, but does not give the response bootstrap footer I require. With your method, the content goes behind the footer instead of a responsive footer where the footer is pushed down the screen so its always under the content. – Raymond Holguin Oct 28 '22 at 18:26