我试图在这里获取嵌套的 div #canvas （白色区域）：http://osf. Fivetoolsoftware.com填满 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;
}
我最终使用 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 解决方案来解决这个问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
