Question

我必须创建一个将显示控件模板的asp.net mvc页面。控件将从xml文件中获取。我的问题是没有确切数量的控件，所以，我需要动态页面高度。我们的网站背景是蓝色，显示页面是白色。当我将控件写入页面时，如果有许多控件，那些在蓝色背景上重叠。我已经分配了“身高：85％”，“身高：自动”，但是，它并没有改变。我的css文件是这样的。

#main-content 
{
 padding:0px 0px 25px; 
 width:747px;
 position:relative;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 height:85%;
}

Html文件就像下面一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<link href="../Content/customize.css" rel="stylesheet" type="text/css" />
</head>
<body> 
    <div id="main-content">          
 <div>
    <div style='left:20px;top:80px; position:absolute;' >Name</div>
    <div style='left:80px;top:80px; position:absolute;' ><input id='Text1' type='text' value='Mr.Temp'/></div>
    <div style='left:20px;top:210px; position:absolute;' ><input id='Chk1' type='checkbox' value='Check One' checked/>Check One</div>
    <div style= 'left:20px;top:340px; position:absolute;' ><input id='Radio1' type='radio' value='OptionOne' />OptionOne</div>
    <div style='left:260px;top:80px; position:absolute;' ><image id='image1'/></div>
    <div style= 'left:118px;top:340px; position:absolute;' ><input id='Radio1' type='radio' value='OptionTwo' checked/>OptionTwo</div>
    <table border='1' style='width:400px;'><caption>TempTable</caption>
    <tr align='left' valign='top'>
    <th align='left' valign='top'>Name</th>
    <th align='left' valign='top'>Age</th>
    <th align='left' valign='top'>Address</th></tr>
    <tr align='left' valign='top'>
        <td align='left' valign='top'>Mr.A</td><td align='left' valign='top'>30</td><td align='left' valign='top'>TownshipA</td></tr>
    <tr align='left' valign='top'>
        <td align='left' valign='top'>Mr.B</td><td align='left' valign='top'>40</td><td align='left' valign='top'>TownshipB</td>
    </tr><tr align='left' valign='top'>
        <td align='left' valign='top'>Mr.C</td><td align='left' valign='top'>50</td><td align='left' valign='top'>TownshipC</td></tr>
 </div>
    </div>
</body>
</html>

请以正确的方式给我一些例子。

问候
悠

Answer 1

问题在于你的绝对定位。

绝对定位的元素不会以任何高度填充身体。

动态页面高度分配

1 个答案: