Home/ Questions/Q 7496883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T18:50:05+00:00

Simplest of pages to demonstrate my problem: <!DOCTYPE html> <html> <head> <style type=text/css> html,

  • 0

Simplest of pages to demonstrate my problem:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body
            {
                height: 100%;
                overflow: hidden;
            }
            body
            {
                margin: 0;
                padding: 0;
            }
            #container
            {
                background: red;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

div-container correctly fills the browser window with red. Now wrap the div in a form:

<body>
    <form>
        <div id="container"></div>
    </form>
</body>

and div-container collapses. Why? What is it about a form tag that ‘breaks’ the ‘closest ancester with height’?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    form is a block element, block elements don’t have any height unless their content expands or they’re explicitly given a height. The closest ancestor of #container is form, and it’s height is 0, so #containers height is 0.

    • 0