How to Make a Div Span 100% of the Page Height Using Only CSS?

How to Stretch a Div to 100% Page Height without JavaScript

In designing a webpage, it's common to want to create a navigation bar or other element that spans the entire height of the page, not just the viewport's visible area. To achieve this, let's explore a pure CSS solution.

CSS Solution:

html {
    min-height: 100%; /* Ensure it's as tall as the viewport */
    position: relative;
}
body {
    height: 100%; /* Force body to match HTML's height */
}
#navigation-bar {
    position: absolute;
    top: 0; /* Top edge of the page */
    bottom: 0; /* Bottom edge of the page */
    left: 0; /* Left edge of the page */
    right: 0; /* Right edge of the page */
}

This CSS positions the navigation-bar element absolutely within the viewport, ensuring it fills the entire page height without scrolling limitations.

Explanation:

• html sets a minimum height to 100% to match the viewport. This prevents the div from being clipped.
• body sets the height to 100% to force it to match the HTML element's height.
• position: absolute removes the div from normal document flow, allowing it to be positioned within the viewport.
• top: 0 and bottom: 0 extend the div to the full height of the page.

Additional Notes:

• For a full-height column, remove left or right from the #navigation-bar selector.
• For a full-width row, remove top or bottom.
• If the div is not intended as a background, remove z-index: -1; from the selector.

The above is the detailed content of How to Make a Div Span 100% of the Page Height Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!