爲什麼我的絕對定位表不填充它的容器div？

Question

我有一個div內的表，並且表不會填充容器div。爲什麼不？

HTML：

<div class="fill"> 
    <table class="table"> 
    ... 
    </table> 
</div> 

CSS：

.fill { 
    position:relative; 
    width:100%; 
    height:100%; 
} 

.table { 
    position:absolute !important; 
    left:0 !important; 
    right:10px !important; 
    bottom:0 !important; 
    top:39px !important; 
} 

表僅填充容器的div一小部分。爲什麼？

更新： 或者，如果我嘗試以下操作，它在Firefox中不起作用，但它在Chrome中起作用。

HTML：

<div class="fill"> 
    <div class="wrap"> 
    <table class="table"> 
     ... 
    </table> 
    </div> 
</div> 

CSS：

.fill { 
    position:relative; 
    width:100%; 
    height:100%; 
} 

.wrap { 
    position:absolute; 
    left:0; 
    right:0; 
    top:39px; 
    bottom:0; 
} 

.table { 
    position:relative; 
    height:100%; 
    width:100%; 
} 

這第二個版本是更接近我想要的（因爲它在Chrome瀏覽器）。

Answer 1

表格很特別，它們不像其他的塊元素。通常情況下，一張桌子的寬度足以容納其中的內容，而不再是其他內容。爲表格設置100％的寬度應該強制它填充分配給它的空間。

Answer 2

。表上，把寬度= 100％

您可能必須設置爲TD的寬度以及..根據使您的佈局結構

Answer 3

表中的您的父母DIV的寬度和100％的高度，這將是無論父母的元素是什麼。該表不需要位置：絕對，因此不需要有頂部，左側，右側，底部設置。

table { 
    border: 1px solid blue;  
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

這裏是我的，你想要什麼小提琴，減去頂部和右側抵消你。 http://jsfiddle.net/jaredwilli/5s4DD/

您可以改爲使用邊距來設置頂部和右側，但是您不能使用100％寬度，這是行不通的。你可以使用display：inline-block，而不是100％的寬度，而是動態地將寬度設置爲比使用javascript的填充div寬度的寬度小10px，但那是另一回事。頂級定位也一樣。你也可以做其他一些事情，但是有很多事情需要你去做。

此外，您可以使用表格，除非在頁面中有多個表格，否則不需要類別。 並從您的CSS中刪除所有！important。 從來沒有必要使用！重要的，只是說。

Answer 4

在問候你原來的問題，這是回答你「爲什麼不」：

如果沒有指定包含塊的高度明確 （即，它取決於內容的高度），並且此元素不是 的絕對定位，值計算爲'auto'。

來源：http://www.w3.org/TR/CSS2/visudet.html#the-height-property

你「補」的div設置爲100％的高度，但什麼是它的父元素的高度設置爲？如果它的父元素的高度也是一個百分比，那麼父元素的高度是多少？

爲您的更新示例添加邊框，您可以看到，'fill'的高度爲0，因爲它沒有指定高度的父項，所以'wrap'的高度也爲零。添加一個父包裝來包裝整個示例，高度爲500px左右，並且在至少Firefox（Firefox）和Chrome中按預期工作。

CSS：

.fill { 
    position:relative; 
    width:100%; 
    height:100%; 
    border: 1px solid red; 
} 

.wrap { 
    position:absolute; 
    left:0; 
    right:0; 
    top:39px; 
    bottom:0; 
    border: 1px solid blue; 
} 

.table { 
    position:relative; 
    height:100%; 
    border: 1px solid green; 
} 
.parent { 
    height: 300px; 
} 

HTML：

<div class="parent"> 
<div class="fill"> 
    <div class="wrap"> 
    <table class="table"> 
     <tr><td>...</td></tr> 
    </table> 
    </div> 
</div> 
</div>