How Do I Make a DIV Stretch to the Bottom of the Page Even When Empty?

Stretching a DIV Block to Page Bottom, Regardless of Content

You're attempting to ensure that a content div extends all the way to the page's bottom. However, it currently only stretches when there's actual content to display. This is crucial if you want the vertical border to remain visible even in the absence of content.

Issue:

The problem lies not with the height of the div but with its container. The parent container is not at 100% height, causing the content div to inherit that height.

Solution:

To resolve this, add the following CSS:

html,body { height:100%; }

Additional Adjustments:

You may need to adjust padding and margins to achieve the desired look.

Browser Compatibility:

If you need this to work across all browsers, additional modifications may be required.

Recommended Resources:

• [Testing HTML Body Height](http://www.brunildo.org/test/html_body_0.html)
• [HTML and Body Height](http://www.brunildo.org/test/html_body_11b.html)
• [QuirksMode](http://quirksmode.org/) for further browser compatibility information

The above is the detailed content of How Do I Make a DIV Stretch to the Bottom of the Page Even When Empty?. For more information, please follow other related articles on the PHP Chinese website!