Initially, the .mainHeader class is being set with a position: fixed property. This ensures that the element remains in a fixed position within the viewport, unaffected by zooming or scrolling.
To remove this fixed positioning, simply delete the position: fixed declaration along with its accompanying top and left properties.
The current height is set to occupy 100% of its parent element's height, making it always the same size as the parent.
To adjust the height based on the visible page area (viewport), you can utilize the vh unit, which represents a percentage of the viewport's height - similar to using vw for width.
For instance, to make the element's height equal to 100% of the viewport's height, include:
height: 100vh;
NOTE - Some browsers may not fully support the vh unit (I've encountered a few). Consider providing an alternative value alongside vh to ensure compatibility. For example:
height: 500px; // fallback if vh not supported
height: 100vh; // takes precedence if vh is supported
If you notice extra spacing around the element, removing padding and/or margin from the body or other elements might be necessary. Experiment with adjustments to achieve the desired outcome.
Here's an illustration:
body {
padding: 0;
margin: 0;
... other styles
}
Explore a live demonstration on JSFiddle: https://jsfiddle.net/s49p6Laj/
Sample code snippet:
HTML
<div class="header">
Content filling the viewport!
</div>
<div class="other-stuff">
// Additional content...
</div>
CSS
// Reset body margins and padding
body {
margin: 0;
padding: 0;
}
// Ensure container fills the viewport
.header {
width: 100%;
height: 100vh;