Home/ Questions/Q 864787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T09:32:13+00:00

I’m having difficulty getting a 100% page height including contained divs. What seems to

  • 0

I’m having difficulty getting a 100% page height including contained divs. What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the bottom, even if it’s been displaced by an element above it, so the child overflows the parent.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Home</title>
    <style type="text/css">
    html, body, #container, #content
    {
        height: 100%;
        min-height: 100%;
    }

    html { border: 1px solid red; }
    #content { border: 1px solid blue; }
    </style>
</head>
<body>
    <div id="container">
        <h2>Test</h2>

        <div id="content">
            <p>Testing</p>
        </div>
    </div>
</body>
</html>

I’m beginning to believe that simply this is simply the correct behaviour and just doesn’t work, but I figured I’d ask the collective intelligence first before overhauling the approach.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yeah, you can use overflow: hidden; or start playing with floats and clears.

    I don’t think God intended for pages to just be exactly one screen high. 🙂

    Or is a vertical scrollbar allowed?
    If so, then you might check out: http://matthewjamestaylor.com/blog/perfect-full-page.htm

    • 0