nested relative positioned div needs to have a 100% height_问答_开发者

nested relative positioned div needs to have a 100% height

开发者 https://www.devze.com 2023-03-17 23:30 出处：网络

I\'m trying to get the nested div #canvas (white area) here: http://osf.fivetoolsoftware.com to fill up 100% of the empty space.

相关专题：asp.net css

I'm trying to get the nested div #canvas (white area) here: http://osf.fivetoolsoftware.com to fill up 100% of the empty space.

Here is the html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ontario Shores Foundation</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../css/styles.css" rel="stylesheet" type="text/css" />
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
</head>
<body>
    <form id="form2" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager3" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div id="wrapper">
        <div style="padding-top: 20px;">
            <div id="canvas">
                <div style="text-align: r开发者_Python百科ight; width: 100%;">
                    <uc3:LoginView ID="LoginView1" runat="server" />
                </div>
                <uc1:Header ID="Header1" runat="server" />
                <div id="content">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>
        <div class="push">
        </div>
    </div>
    <uc2:Footer ID="Footer2" runat="server" />
    </form>
</body>
</html>

Here is the pertinent css:

html, body, form
{

    background-color: #c7beb4;
    font-family: Tahoma, arial;
    font-size: 12px;
    color: #000000;
    height: 100%;
    margin:0;
    padding:0;
    top: 0px;
    left: 0px;
    background: url('../images/bg.jpg') top left repeat-x;
    background-color: #c9c0b7;


}

#wrapper
{
    background-position: left top;
    height: auto !important;
    height: 100%;
    position: relative;
    margin: 0 auto -132px;
    min-height: 100%;


}

#canvas {

    position: relative;
    width: 930px;
    background:#fff;    
    min-height: 100%;
    margin: 0 auto;


}

I ended up using a jquery function to increase the height of the div

$(document).ready(function () {
    var h = window.innerHeight - 20 - 132; //padding and footer height
    if (h > $('div#canvas').height()) {
        $('div#canvas').height(h);
    }

});

I am still thinking there's a cleaner css solution to this problem.