我正在使用ASP.NET MVC3插件jQuery Datatable。当数据表在页面上时，我的 CSS 布局出现问题。如果没有数据表，则一切正常。当数据表在屏幕上时，它会与我网站的页脚重叠。我似乎无法让它正确显示。我有一个使用 的网格布局YUI3，这是我在 YUI3 中都使用的（按此顺序）：
- cssreset-min
- cssfonts-min
- cssgrids-min
- cssbase-min
这在最新版本的 FireFox 中运行良好。我只是在测试IE8，这是一个要求，我工作的大多数人都使用 IE8。
我已经缩小了我的 HTML，因此只有最低限度的可用。这是我的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link href="/Assets/Stylesheets/hef2.css" rel="stylesheet" />
<link href="/Assets/Stylesheets/jQuery-DataTables/css/jquery.dataTables.css" rel="stylesheet" />
</head>
<body>
<div id="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
<div id="bd">
<div class="yui3-g">
<div class="yui3-u" id="nav">
<div id="nav-container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</div>
<div class="yui3-u" id="main">
<div id="main-container">
<div class="content">
<h1>Banks Dashboard</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
<div class="content">
<div id="banks-datatable-wrapper">
<div id="banks-datatable-container"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</div>
</div>
</div>
<div id="ft">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
<script src="/Assets/JavaScripts/jQuery/jquery-1.7.2.min.js"></script>
<script src="/Assets/JavaScripts/jQuery-DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#banks-datatable-container').html('<table class="display" id="banks-datatable"></table>');
$('#banks-datatable').dataTable({
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade" }
],
"bAutoWidth": false,
"bFilter": false,
"bLengthChange": false,
"bProcessing": true,
//"bServerSide": true,
"bSort": false,
"iDisplayLength": 11,
"sAjaxSource": '/Administration/Bank/List2'
});
});
</script>
</body>
</html>
这是我目前与 YUI3 的 CSS 一起使用的唯一 CSS：
body
{
margin: auto;
width: 1025px;
}
#nav
{
width: 300px;
}
#main
{
width: 725px;
}
有人可以帮我解决这个问题吗？我试过添加clear:both，但没有奏效。
是像 jsbin 这样的在线服务，我可以在其中粘贴/上传我的 HTML/CSS 代码/文件吗？
代码可以在：http ://live.datatables.net/efosuj/3/edit 查看。它在可用查看器中正确显示，但在 IE8 中单独运行时会出现问题。
更新 2012-06-12
我设法添加了以下内容并且它有效，但我想以一种样式添加它，尝试过但它没有用：
if (navigator.userAgent.toString().indexOf('MSIE') >= 0) {
jQuery('#main-container').css('overflow', 'auto');
}
这是在加载网格后添加的。这是唯一的方法吗？