我正在使用带有ASP.NET MVC3插件的jQuery Datatable。当数据表位于页面上时，我的CSS布局出现问题。如果没有数据表，那么一切都很好。当数据表在屏幕上时，它与我网站的页脚重叠。我似乎无法正确显示它。我有一个使用YUI3的网格布局，这是我在YUI3中使用的（按此顺序）：
这在最新版本的FireFox中运行良好。我只在IE8进行测试，这是一项要求，我工作中的大多数人都使用IE8。
我缩小了我的HTML，以便只提供最低限度的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');
}
这是在加载网格后添加的。这是唯一的方法吗？
答案 0 :(得分：0)
在你的桌子上你有class =“display”这个课程里有什么？我认为这门课需要职位：绝对;
答案 1 :(得分：0)
我使用了以下内容，它对我有用：
if (navigator.userAgent.toString().indexOf('MSIE') >= 0) {
jQuery('#main-container').css('overflow', 'auto');
}
它发布在datatables forums。