CSS：絕對定位使表格比窗口更寬

Question

我是一個iPhone開發人員，他對於Web開發來說很新穎，所以請原諒我，如果我犯了一些愚蠢的錯誤。

我的問題可以在這個jsfiddle（沒有js）上演示。我在頂部有一個寬度爲100％的桌子。這顯示正常。底部的表格屬於同一類，具有100％的寬度，但是因爲我將位置絕對設置爲ID（#footerTable），所以寬度大於100％！ - 你能否告訴我我做錯了什麼（CSS/html在鏈接 - 沒有太多）。

Answer 1

http://jsfiddle.net/xnhMY/

當你絕對定位的表，它是100％的寬度來計算的，因此左/右爲您的頁腳的距離：

寬體元素+ body元素的填充

Answer 2

指定您left參數第二個表格：

#footerTable { 
    position:absolute; 
    bottom:20px; 
    left:0px; 
} 

Answer 3

原因table.loginTable寬度大於100%寬度是因爲它是100%寬度加上20px（左和右padding10px）。

Answer 4

您可能希望您的頁腳始終處於底部，但是該主體上的默認樣式（body {padding:10px;}）意味着當第一個表格處於流入狀態時，剩下100％是w/e介於身體的這些尺寸之間。

但是，當你把你的第二張桌子放在絕對位置時，它會放在相對於具有10px填充的身體標籤。但是由於第二張桌子是絕對定位的，它與身體標籤沒有更進一步的關係，並且100％寬度是身體的實際寬度，沒有填充物。你已經看到了這個結果。要修復它重置在身上的標籤body {padding:0;}填充或明確設置#footerTable {left:10px;right10px;}