How to Make a DIV Element Occupy Full Page Height Without Content?

How to Extend a DIV Element to the Full Page Height, Even Without Content

In scenarios where a DIV block lacks content but requires its vertical border to extend to the page bottom, the task can be achieved by ensuring the DIV's container element reaches 100% page height.

Solution:

To resolve the issue, the following styles can be applied:

html, body {
    height: 100%;
}

This ensures that the browser's HTML and body elements span the entire page height, providing a canvas for the DIV element to expand within.

Additional Considerations:

Depending on the target browser and design requirements, additional adjustments may be necessary, such as adjusting margins and padding.

Further Resources:

For comprehensive examples and browser compatibility considerations, refer to the following resources:

• http://www.brunildo.org/test/html_body_0.html
• http://www.brunildo.org/test/html_body_11b.html
• http://www.brunildo.org/test/index.html

Furthermore, the QuirksMode website provides valuable insights into browser quirks and best practices for web development.

The above is the detailed content of How to Make a DIV Element Occupy Full Page Height Without Content?. For more information, please follow other related articles on the PHP Chinese website!