具有完整内容宽度的 div答案

【问题标题】：div with full content width具有完整内容宽度的 div
【发布时间】：2011-09-08 20:24:19
【问题描述】：

我的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 没有覆盖其内容。它占用了我的屏幕大小，左侧的其余部分是白色的，还有一个水平滚动条，因为这对于 2000px 表来说很自然。

我需要的是 id 为“container”的 div 覆盖其全部内容，如果水平滚动页面，则 id 为“header”的 div 保持固定在其位置。

我怎样才能做到这一点？

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

第一种解决方法是将#container的width从100%改为2000px并去掉max-width。

演示：http://jsfiddle.net/h3TQ3/

第二种解决方案是从#container 中删除max-width 和width，并将position:relative 更改为position:absolute

演示：http://jsfiddle.net/h3TQ3/1/

要将您的标题放在固定位置，您可以添加以下 css：

.header {
    position: fixed;
    top: 0;
    width: 100%;
}

【讨论】：

标题的解决方案有效，但我无法将#container 的width 设置为2000px，因为我在我的问题中告诉我表格将动态生成，我没有范围跟踪width之前的表。
@Tapas Bose 那么我想你只能使用一些javascript。例如在 jQuery 中你可以编写如下$("#container").width($("table").width()); Demo：jsfiddle.net/h3TQ3/2

【解决方案2】：

从#container CSS 中移除 height width min-height 和 min-width。

添加

.header {
    position: fixed;
    top: 0;
    left: 0;
}

您还需要设置 main-content 的上边距以匹配 .header

【讨论】：