嵌套相对定位的div需要具有100％的高度 [英] nested relative positioned div needs to have a 100% height
本文介绍了嵌套相对定位的div需要具有100％的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让div嵌套#canvas（白色区域）的位置： http://osf.fivetoolsoftware.com 来填补空白的100％。
下面是HTML：
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头ID =头像1=服务器＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;安大略省的海岸基础与LT; /标题＆GT;
＆LT; ASP：的ContentPlaceHolder ID =头=服务器＆GT;
＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT;链接的href =../ CSS / Styles.css中相对=样式类型=文/ CSS/＆GT;
＆LT; Telerik的：RadStyleSheetManager ID =RadStyleSheetManager1=服务器＆GT;
＆LT; / Telerik的：RadStyleSheetManager＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =窗体2=服务器＆GT;
＆LT; Telerik的：RadScriptManager ID =RadScriptManager3=服务器＆GT;
＆LT;脚本和GT;
＆LT;％ - 需要为智能感知的JavaScript在VS2010 - ％GT;
＆LT;％ - 对于VS2008与ScriptManager的替代RadScriptManager - ％GT;
＆LT; ASP：的ScriptReference大会=Telerik.Web.UINAME =Telerik.Web.UI.Common.Core.js/＆GT;
＆LT; ASP：的ScriptReference大会=Telerik.Web.UINAME =Telerik.Web.UI.Common.jQuery.js/＆GT;
＆LT; ASP：的ScriptReference大会=Telerik.Web.UINAME =Telerik.Web.UI.Common.jQueryInclude.js/＆GT;
＆LT; /脚本＆GT;
＆LT; / Telerik的：RadScriptManager＆GT;
＆LT; Telerik的：RadAjaxManager ID =RadAjaxManager1=服务器＆GT;
＆LT; / Telerik的：RadAjaxManager＆GT;
＆LT; DIV ID =包装＆GT;
＆LT; DIV的风格=填充顶：20像素;＆GT;
＆LT; DIV ID =画布＆GT;
＆LT; DIV的风格=文本对齐：权利;宽度：100％;＆GT;
＆LT; UC3：LoginView ID =LoginView1=服务器/＆GT;
＆LT; / DIV＆GT;
＆LT; UC1：标题ID =头1=服务器/＆GT;
＆LT; DIV ID =内容＆GT;
＆LT; ASP：的ContentPlaceHolder ID =ContentPlaceHolder1=服务器＆GT;
＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =推＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; UC2：页脚ID =Footer2=服务器/＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
下面是相关的CSS：
HTML，身体，形式
{ 背景颜色：＃c7beb4;
FONT-FAMILY：宋体，宋体;
字体大小：12像素;
颜色：＃000000;
高度：100％;
保证金：0;
填充：0;
顶：0像素;
左：0像素;
背景：网址（'../图像/ bg.jpg'）左上重复-X;
背景颜色：＃c9c0b7;
}#wrapper指定
{
背景位置：左上;
！高度：汽车重要的;
高度：100％;
位置：相对;
保证金：0汽车-132px;
最小高度：100％;
}#canvas { 位置：相对;
宽度：930px;
背景：#FFF;
最小高度：100％;
保证金：0汽车;
}
解决方案
我最终使用jQuery的功能，以增加div的高度
$（文件）。就绪（函数（）{
VAR H = window.innerHeight - 20 - 132; //填充和页脚的高度
如果（h取代; $（'＃DIV画布'）的高度（））{
$（'＃DIV画布'）高度（h）。
}}）;
我还是想有一个更清洁的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: 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>
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.
这篇关于嵌套相对定位的div需要具有100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
