格全內容寬度

我的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

格全內容寬度

回答

相關問題