Pixels vs. Bytes: Sticky footer

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="UTF-8">
    <!-- <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> -->
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <style type="text/css">
        /*** The essential CSS needed for the layout ***/

        html, body {
            height: 100%;
            margin: 0pt;
        }

        .Frame {
            display: table;
            width: 100%;
        }
        html>/**/body .Frame {
            height: 100%;
        }

        .Row {
            display: table-row;
            height: 1px;
            overflow: hidden;
        }
        html>body .Row.Expand {
            height: auto;
        }

        /*** Some other CSS for the look ***/

        body {
            background: #999;
        }

        #Header {
            background: #333;
            color: #eee;
            height: 70pt;
        }

        #Content {
            background: #ffc;
        }

        #Footer {
            background: #cfc;
        }

        p, h1, h2, h3 {
            margin: 10pt;
        }
    </style>
    <title>Pixels vs. Bytes | Example: Sticky footers for everyone</title>
</head>

<body class="Frame">
    <div id="Header" class="Row">
        <h1>Header (70pt)</h1>
    </div>
    <div id="Content" class="Row Expand">
        <h2>Content (expands)</h2>
    </div>
    <div id="Footer" class="Row">
        <h3>Footer (auto)</h3>
    </div>
</body>

</html>