嵌套的相對定位div需要有100％的高度

我想要在這裏獲得嵌套的div #canvas（白色區域）：http://osf.fivetoolsoftware.com填充100％的空白空間。嵌套的相對定位div需要有100％的高度

下面是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: right; 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>

下面是相關的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; 


}

來源

2011-07-08 FiveTools

我結束了使用jQuery的功能，以增加DIV

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

});

的高度我仍然認爲有一個更清潔的CSS解決這個問題。

來源

2011-07-13 20:12:40 FiveTools

嵌套的相對定位div需要有100％的高度

回答

相關問題