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;
}