Fabulous Free Icons - Silky Smooth, And ... »
« Adventures of a Lead Programmer in a One...
CSS + JavaScript = Alternative to Framesets
Posted by Will on Thursday, June 12, 2008 at 2:28 PM

This is a Frankenpost - it was on the blog before I migrated from Community Server to DasBlog.  It's one that I find useful so I'm porting it over.

Here's something I cobbled together as a replacement for a frameset. The technique takes advantage of the overflow CSS property applied to the HTML doc and a div within it to achieve the appearance of a frameset.  I used it in a MasterPage scenario, but it would work on a single page just as well. 

First you need to structure your page something like this:

<body >
    <form id="form1" runat="server">
        <div class="divHeader" id="masthead">
            This is the header
        </div>
        <div id="divPlaceHolderWrapper">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
        </div>
    </form>
</body>

Your CSS should look like this:

body, html {
    overflow: hidden;
    font-family: Arial, Sans-Serif;
    margin: 0;
}

.divHeader {
    background-color: Gray;
    color:White;
    font-size: 2em;
    font-weight: bold;
}

#divPlaceHolderWrapper {
    overflow: auto;   
}

Hiding the overflow for the HTML has the effect of removing the scrollbar from the browser window.  We add it back to our div

And you'll need this JavaScript (which I found here):

<script language="javascript" type="text/javascript">
    function GetWindowHeight() {
        var myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ){
            //Non-IE
            myHeight = window.innerHeight;
        }
        else {
            if ( document.documentElement && ( document.documentElement.clientWidth ||    document.documentElement.clientHeight ) ){
                //IE 6+ in 'standards compliant mode'
                myHeight = document.documentElement.clientHeight;
            }
            else {
                if ( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                    //IE 4 compatible
                    myHeight = document.body.clientHeight;
                }
            }
        }
        return myHeight;     }
    function SetPlaceHolderWrapperHeight() {
        var wrapperHeight = GetWindowHeight() - 37;  //the height of the lower edge of the browser window
        document.getElementById('divPlaceHolderWrapper').style.height = wrapperHeight + 'px';
    }   
    window.onload = function() { SetPlaceHolderWrapperHeight(); }
    window.onresize = function() { SetPlaceHolderWrapperHeight(); }
</script>

The resulting page will show the contents of the divPlaceHolderWrapper (in this case - whatever is in the content area of the page using this MasterPage) with a scrollbar if necessary.  If the content does not fill up the window, then no scrollbar appears.  While resizing the browser window in IE divPlaceHolderWrapper is continuously resized.  In Firefox the div is resized once the resizing of the browser window is complete.

Comments [0]     Categories: asp.net | CSS | Web Design              
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):
Live Comment Preview