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

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

<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中，它只能延伸到表格中最大高度內容的高度。有人知道爲什麼

來源

2010-12-10 Nick

喜可以請提供屏幕截圖 – Vicky 2010-12-10 06:15:50

僅供參考，這是不是「唯一的瀏覽器。」這也發生在Safari中，所以它與** webkit **呈現表格有關。我正在瀏覽默認的樣式表來嘗試找到答案，但我沒有提出太多的答案。 – AgentConundrum 2010-12-10 06:27:14

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

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

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

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

table { 
    height: 100%; 
}

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

來源

2010-12-10 07:13:14 AgentConundrum

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

回答

相關問題