格全内容宽度

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

我需要的是，id为“container”的div覆盖了它的整个内容，如果一个页面水平滚动，那么id为“header”的div仍然保持固定。

我该如何做到这一点？

谢谢。

来源

2011-06-05 Tapas Bose

http://jsfiddle.net/n26Lc/ – 2011-06-05 18:30:07

第一个解决方案是到#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%; 
}

来源

2011-06-05 18:44:12 Sotiris

解决方案的标题工作，但我不能''容器'宽度'＃容器设置为2000px，因为我在我的问题中告诉表，该表将动态生成，我没有范围跟踪之前表格的“宽度”。 – 2011-06-06 04:44:52

@Tapas Bose然后我想你只能使用一些JavaScript。例如在jQuery中，您可以编写以下'$（“＃container”）。width（$（“table”）。width（））;'Demo：http://jsfiddle.net/h3TQ3/2/ – Sotiris 2011-06-06 08:36:15

从#container CSS中删除高度宽度最小高度和最小宽度。

添加

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

你也将需要设置上边距为主要内容，以配合.header

来源

2011-06-05 18:44:06 natedavisolds

格全内容宽度

回答

相关问题