Question

我的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为“container”的div不包含其内容。它占据了我的屏幕的大小，左边的部分的其余部分是白色的，还有一个水平滚动条，因为这是自然的2000px表。

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

我怎样才能做到这一点？

谢谢。

Answer 1

从#container CSS中删除高度宽度min-height和min-width。

添加

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

此外，您还需要设置主要内容的上边距以匹配.header

Answer 2

第一个解决方案是将width从#container更改为100%并移除2000px。

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

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

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

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

position:absolute

div具有完整的内容宽度

2 个答案: