How Do I Make a DIV Element Expand to the Bottom of the Page?-CSS Tutorial-php.cn

How Do I Make a DIV Element Expand to the Bottom of the Page?

Barbara Streisand

Release： 2024-11-27 20:40:11

Original

437 people have browsed it

How Do I Make a DIV Element Expand to the Bottom of the Page?

Enforcing DIV Expansion to Page Bottom

In web design, it's sometimes necessary for a DIV block to extend to the page's bottom, even in the absence of content. This can be challenging, as DIVs will typically only expand as necessary to accommodate its contents.

Problem Overview

Consider the following markup:

<body>
  <div>

Copy after login

The goal is to force the DIV with id="content" to stretch vertically, reaching the page's bottom, regardless of content.

Solution

The issue lies not with the height of the content DIV, but with the container surrounding it. To rectify this, apply the following CSS to the html and body elements:

html, body { height:100%; }

Copy after login

This ensures that the browser renders the page with a height of 100%, allowing the content DIV to fully extend to its limits.

Additional Considerations

While this solution will address the majority of cases, it's important to note that different browsers may implement height calculations slightly differently. Here are some helpful resources that provide further insight:

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

Additionally, consult http://quirksmode.org/ for comprehensive browser compatibility information.

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