SYSK 239: Header/ContentPlaceholder/Footer Without Hardcoding Header and Footer Height Size

A master page is normally comprised of a header, footer and a content placeholder. Keeping a header at the top is very straight forward to implement; so is keeping the footer at the bottom (just set the position attribute to fixed and bottom attribute to 0). The challenge to keep the content placeholder between the header and footer regardless of screen resolution and browser window size (e.g. when it’s not maximized), and only let the content area to scroll, if necessary (i.e. header and footer are fixed).

 

Here is how I’ve done it (if you think of a better way, share it with others by posting your recommendation as a comment to this post):

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" id="html">

<head runat="server">

    <title>Your Page Title Here</title>

   

    <style type="text/css" media="screen">

               

        body

        {

            margin: 0px;

            padding:0px;

            max-height: 100%;

            max-width: 100%;

            overflow: hidden;

        }

        #Header

        {

            position: fixed;

            top: 0px;

            left: 0px;

            width: 100%;

            text-align: center;

            border: solid 1px black;

        }

        #Footer

        {

            position: fixed;

            bottom: 0px;

            left: 0px;

            width: 100%;

            text-align: center;

            border: solid 1px black;

        }

        #Content

        {

            display: block;

            width: 100%;

            overflow: auto;

            position: fixed;

            word-wrap: break-word;

        }

</style>

</head>

<body>

    <form id="form1" runat="server">

        <div id="Header">

  Header here

        </div>

           

        <div id="Content">

            Line 1<br />

            Main content here<br />

            Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

    Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            Main content here<br />Main content here<br />

            END <br />

  </div>

        <div id="Footer">

            Footer here

        </div>

       

    </form>

   

    <script type="text/javascript" language="javascript">

        window.onresize = function()

        {

            SizeContentElement();

        }

        window.onload = function()

        {

            document.getElementById('html').style.overflow = 'hidden';

            SizeContentElement();

        }

        function SizeContentElement()

        {

            var footerElement = document.getElementById('Footer');

            var headerElement = document.getElementById('Header');

       

            var contentElement = document.getElementById('Content');

            contentElement.style.top = headerElement.clientHeight;

          contentElement.style.bottom = footerElement.clientHeight;

        }

       

    </script>

</body>

</html>