0
我正在开发一个全屏流体XHTML/CSS网站。在一个HTML页面中，我有一个div，它通过AJAX加载了一个无序列表。因此，我无法预先知道div的高度。由于div的内容可能会超过文档的可见部分以破坏全屏布局，因此我认为如果需要（使用CSS属性：overflow：auto;），则使用滚动条。问题是溢出属性需要知道我无法自行计算的div的高度。如何通过JQuery在CSS文件中表示div的高度？谢谢。JQuery：计算div的高度
HTML：
<body>
<div id="container">
<div id="header">
<div id="header_content">Header</div>
</div>
<div id="body">
<div id="nav">
<div id="nav_content">
<form id="form">
<fieldset>
<legend>Legend of form:</legend>
<input type="text" maxlength="500" />
<input class="button" type="submit" >
</fieldset>
</form>
<h3>List loaded via AJAX:</h3>
<div id="list">
<ul>
<li>Sample Text 1</li>
<li>Sample Text 2</li>
<li>Sample Text 3</li>
<li>Sample Text 4</li>
<li>Sample Text 5</li>
<li>Sample Text 6</li>
<li>Sample Text 7</li>
<li>Sample Text 8</li>
<li>Sample Text 9</li>
<li>...</li>
</ul>
</div>
</div>
<div id="body_main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nulla erat, rutrum vitae consectetur in, mattis quis est. Donec aliquam sodales viverra. Praesent varius purus et mi semper, in mattis orci tristique. Nam accumsan, ipsum nec lacinia aliquam, est lorem rhoncus leo, eget scelerisque erat eros non urna. Nunc vel odio et quam sodales varius in quis ante. Praesent felis ligula, facilisis in consequat quis, aliquam non metus. Integer vel massa ornare, porttitor erat in, laoreet sapien. Praesent lobortis eu ligula in imperdiet. Etiam pretium, mauris interdum auctor viverra, lectus neque tristique massa, a pellentesque leo sem non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eget purus sapien.</p>
<p>Suspendisse varius nisl non eros fringilla luctus eget quis lacus. Nunc sit amet felis ante. Cras ac aliquet ligula. Nunc mollis sapien posuere libero ornare volutpat. Fusce tincidunt ipsum ante, vel vulputate sem venenatis id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis dolor tortor. Sed vitae justo at metus tincidunt scelerisque sed non justo. Phasellus ligula nulla, fringilla ac urna eu, consequat tincidunt erat. Praesent faucibus porttitor nisi et rutrum. Nam ac arcu egestas, bibendum augue a, bibendum nibh. Vestibulum feugiat urna sit amet ante laoreet, vitae ullamcorper enim pulvinar.</p>
<p>Nulla facilisi. Curabitur semper tincidunt feugiat. Donec bibendum, velit eu molestie consequat, leo massa pretium quam, ut iaculis orci eros accumsan augue. In hac habitasse platea dictumst. Etiam pharetra massa id est commodo imperdiet. Cras ac bibendum eros. Curabitur sodales consectetur est, dignissim condimentum orci commodo ultricies. In non tempus sem.</p>
</div>
</div>
</div>
</body>
</html>
CSS：
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#header{
height: 4.5em;
background-color: #EFEFEF;
position: relative;
}
#header_content{
padding: 1em;
text-align: center;
}
#container{
height: 100%;
}
#body{
height: 100%;
margin-top: -4.5em;
background-color: #C7DFFA;
}
#body_main{
padding: 5em 1em 1em 7em;
}
#nav{
height: 100%;
background-color: gray;
width: 28%;
float: left;
}
#nav_content{
padding: 5em 1em 1em 1em;
overflow: auto;
}
#nav_content form legend {
font-weight: bold;
}
#list{
height: 8em;
overflow: auto;
}