CSS位置底部不會底部（僅限Chrome）

Question

我：

<div style="position: absolute; width: 100%; height: 20%;"> 
    <table style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; table-layout: fixed;"> 
    ... 
    </table> 
</div> 

在Firefox中，該表延伸到div的底部。在Chrome中，它只能延伸到表格中最大高度內容的高度。有人知道爲什麼

Answer 1

好吧，我想我終於得到這個想通了。

看起來，當一張桌子被給出一個明確的高度時，它會展開以適應該高度，這樣當您在絕對定位的<div>內設置top: 0; bottom: 0;時，您會看到該高度。

它還看來，當您使用絕對定位「技巧」來設置表格的高度，Firefox和Opera解釋爲，如果你已經設置明確的高度，即使你沒有。 IE，Chrome和Safari不會做出相同的解釋。

此解決方法是明確設置表格的高度。在這種情況下，你會希望它是<div>的整個高度：

table { 
    height: 100%; 
} 

順便說一句，因爲你明確設置表格的高度，你就不再需要對其進行拉伸與絕對定位，所以你可以擺脫它，以及top, bottom, left, and right屬性。