0

I am looking to write a web page for IE 8 that has a logo and header div at the top, a content seciton in the middle, and a sticky footer at the bottom. The problem is, I cannot get the content section to take up 100% of what's left. Code below. Whenever I set the height as 100% for the content, there is a 100px over due to the header/logo divs. How can I fix this?

HTML

<%@ Master Language="C#" inherits="DenApp.master"%>
<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 id="master_maindiv">
            <div id="master_logodiv">
            </div>
            <div id="master_tabsdiv">
            </div>
            <div id="master_contentdiv">
                <asp:contentplaceholder ID="content" runat="server" />
            </div>
        </div>
        <div id="master_footerdiv">
        </div>
    </div>
</body>
</html>

CSS

html, body
{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
}
#master_bodywrapper
{
    margin:0px;
    padding:0px;
    height:100%;
    background-color:Black;
}
#master_maindiv
{
    background-color:Orange;
    padding-bottom:20px;
    height:100%;
}
#master_logodiv
{
    background-color:Blue;
    height:50px;
}
#master_tabsdiv
{
    background-color:Green;
    height:50px;
}
#master_contentdiv
{
    background-color:Yellow;
}
#master_footerdiv
{
    background-color:Purple;
    height:20px;
    position:relative;
    margin-top:-20px;
    clear:both;
}

Fiddle added at request: http://jsfiddle.net/zZUUW/5/

4

2 に答える 2

1

から削除padding-bottomし#master_maindivます: http://jsfiddle.net/zZUUW/6/

于 2013-09-16T17:16:05.770 に答える