My web page structure includes a navigation bar and content view components. I want to add a div element within the content area that covers the entire screen width and height, so I applied the following CSS style:
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
However, the top of the div does not align with the top of the screen as expected, but instead lines up with the bottom of the navigation bar. Any thoughts on why this is happening?
Feel free to experiment with this issue in a plunker: http://plnkr.co/edit/q2iynXaMnTZ2fGqzlJZo. You'll notice that the red border doesn't extend past the header. Take a look at the home.html and style.css files for more information.
I seem to have misunderstood something about the fixed position property. My understanding was that an element with a fixed position should be relative to the browser window. Can you help me identify my mistake and suggest how to properly make my fixed div cover the entire screen?