我的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;
}
如您所见，我添加了一个宽度为 2000 像素的表格。因为我会动态地添加表。这会导致页面变形。 ID 为“container”的 div 未覆盖其内容。它占据了我的屏幕大小，左边的其余部分是白色的，还有一个水平滚动条，因为这对于 2000 像素的表格来说很自然。
我需要的是 ID 为“container”的 div 覆盖其全部内容，并且如果水平滚动页面，id 为“header”的 div 保持固定在其位置。
我怎样才能做到这一点？
谢谢。
最佳答案
第一个解决方案是将#container的width从100%改为2000px并去掉最大宽度。
第二种解决方案是从 #container 中删除 max-width 和 width 并更改 position:relative到 position:absolute
演示:http://jsfiddle.net/h3TQ3/1/
要使标题位于固定位置，您可以添加以下 css:
.header {
position: fixed;
top: 0;
width: 100%;
}
关于html - 具有完整内容宽度的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6244912/