我的html页面的简化内容是：
<body>
<div id="container">
<div class="header"></div>
<div class="main-content" style="float:none; align:center; text-align:center; margin:auto;">
<table style="width: 2000px;">
<tr>
<td>Some Content</td>
</tr>
</table>
</div>
<div class="footer">
<a href="#">EMS</a>
</div>
</div>
</body>
.css：
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
font-family: "Liberation Sans",'Lucida Grande',Verdana,Arial,Helvetica, "Luxi Sans", "Bitstream Vera Sans", Tahoma,Sans-Serif;
font-size: 90%;
background: #FAFAFA;
color: #333333;
}
#container {
background:#AEC7DB url('../main-bg-gradient.png') repeat-x top left;
position: relative;
min-height: 100%;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
max-width: 100%;
}
.main-content {
position: relative;
padding: 0px;
}
.footer {
clear:both;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 90%;
padding: 4px 0px 4px 0px;
text-align: center;
}
如您所见，我添加了一个表格宽度2000px。由于我将在其中动态添加表。这会导致页面变形。 ID为“容器”的div不覆盖其内容。它占用了我的屏幕大小，左侧的其余部分为白色，还有一个水平滚动条，因为这对于2000px表格是很自然的。
我需要的是id为“ container”的div覆盖其全部内容，而id为“ header”的div保持固定在其位置，如果一个人水平滚动页面。
我该如何实现？
谢谢。
最佳答案
第一个解决方案是将width的#container从100%更改为2000px并删除max-width。
演示：http://jsfiddle.net/h3TQ3/
第二种解决方案是从max-width中删除width和#container并将position:relative更改为position:absolute
演示：http://jsfiddle.net/h3TQ3/1/
要将标题固定在某个位置，可以添加以下CSS：
.header {
position: fixed;
top: 0;
width: 100%;
}