CODEWITHSUNDEEP
csshtmlheightstrict
steventnorris
steventnorris

Reputation: 5876

Sticky Footer, Header, and 100% Height Content

I am attempting to have a header, a sticky footer, and a content section that spans the middle space at 100%. However, I'm having issues with the middle height over-reaching. I've included code below and jsfiddles. I am using HTML 4.0 strict in IE7 and do not have the option of changing either of those. Thanks in advance!

jsfiddle without 100% height: http://jsfiddle.net/hWRnZ/

jsfiddle with 100% height: http://jsfiddle.net/hWRnZ/1/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head runat="server">
    <title>DenApp</title>
    <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
    <link rel="Stylesheet" href="./css/master.css" />
</head>
<body>
    <div id="master_bodywrapper_div">
        <div id="master_header_div">
            <div id="master_logo_div">
                <div id="master_logo_div_image">
                    <img id="master_logo_img" alt="logo" src="./images/DenApp_Logo.png" />
                </div>
                <div id="master_welcome_div">
                    <div id="master_welcome_div_inner">
                        Welcome SO-AND-SO!
                    </div>
                </div>
            </div>
            <div id="master_tabs_div">
                <div id="master_tabs_div_home" class="master_tabs">
                    Home
                </div>
                <div id="master_tabs_div_masterlist" class="master_tabs">
                    Full List
                </div>
                <div id="master_tabs_div_myworklists" class="master_tabs">
                    My Worklists
                </div>
                <div id="master_tabs_div_detail" class="master_tabs">
                    Detail
                </div>
                <div id="master_tabs_div_reporting" class="master_tabs">
                    Reporting
                </div>
                <div id="master_tabs_div_assignment" class="master_tabs">
                    Assignment
                </div>
                <div id="master_tabs_div_admin" class="master_tabs">
                    Admin
                </div>
            </div>
        </div>
        <div id="master_main_div">
            <div id="master_content_div">
                <div id="master_content_div_inner">
                    Hello World!
                </div>
            </div>
        </div>
        <div id="master_footer_div">
            <div id="master_footer_div_
        </div>
    </div>
</body>
</html>

CSS

/*Main Styles*/
html, body
{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
}
#master_bodywrapper_div
{
    margin:0px;
    padding:0px;
    height:100%;
}

/*Header Styles*/
#master_header_div
{
    position:absolute;
    height:72px;
    margin:0px;
    padding:0px 0px 0px 0px;
    left:0px;
    top:0px;
    width:100%;
}
#master_main_div
{
    height:100%;
    width:100%;
}
#master_logo_div
{
    height:50px;
    padding:0px 5px 0px 5px;
    margin:0px;
}
#master_logo_div_image
{
    padding:0px;
    margin:0px;
    position:relative;
    float:left;
}
#master_logo_img
{
    padding:0px;
    margin:0px;
    height:50px;
    position:relative;
    top:9px;
}
#master_welcome_div
{
    padding:0px;
    margin:0px;
    position:relative;
    float:right;
    height:50px;
    width:50%;
}
#master_welcome_div_inner
{
    padding:0px;
    margin:0px;
    position:absolute;
    bottom:0px;
    right:0px;
}
#master_tabs_div
{
    clear:both;
    padding:2px 0px 0px 0px;
    margin:0px;
    height:22px;
}
.master_tabs
{
    margin:0px 1px 0px 0px;
    padding:1px 3px 1px 3px;
    height:25px;
    display:inline;
    border:2px solid Black;
    font-weight:bold;
    background-color:#009799;
    background-image:url(../images/blue_gradient_bottom.png);
    background-position:bottom;
    background-repeat:repeat-x;
}
.master_tabs:hover
{
    background-image:url(../images/blue_gradient_top.png);
    background-position:top;
    cursor:pointer;
}

/*Content Styles*/
#master_content_div
{
    padding-top:78px;
    height:100%;
}
#master_content_div_inner
{
    background-color:Blue;
    height:100%;
}


/*Footer Styles*/
#master_footer_div
{
    background-color:Purple;
    height:20px;
    position:relative;
    margin-top:-20px;
    clear:both;
}

Upvotes: 1

Views: 2364

Answers (1)

Alex Art.
Alex Art.

Reputation: 8781

Give both your header and footer fixed position and set top and bottom margins for the main div as heights of header and footer respectively. 

    /*Main Styles*/
html, body
{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}


/*Header Styles*/
#master_header_div
{
    background-color:Purple;
    height:72px;
    display:block;
    width:100%;
    top:0px;
}
#master_main_div
{
    overflow:hidden;
    background-color:Red;
    width:100%;
    margin-top:72px;
    margin-bottom:20px;
    display:block;
    height:100%;
}

/*Footer Styles*/
#master_footer_div
{
    background-color:Purple;
    height:20px;
    position:fixed;
    bottom: 0;
    display:block;
    width:100%;
}

Here is fiddle: fiddle

Upvotes: 2

Related Questions