表格百分比高度和寬度不工作的CSS類

Question

我試圖設置表格的行和高度作爲使用各種類的百分比，但它們似乎不起作用。出於某種原因，百分比沒有被檢測到，我不知道爲什麼。

我試過將表格高度和寬度設置爲100％，但是這會導致表格太寬而失去高度，所以它們都設置爲650px。

table{ 
height: 100%; 
width: 100%; 
height: 650px; 
width: 650px; 
border-style:hidden; 
/* centre the table */ 
margin: 0 auto; 
} 

我也嘗試設置身體的寬度和高度爲100％，根據其他人的建議，但這沒有效果。

body { 
height: 100%; 
width: 100%; 
} 

小提琴是： http://jsfiddle.net/g9apxqgb/5/

謝謝！

Answer 1

當你寫height: 100%; width: 100%;時，你一定要想想100%是什麼？如果將table的父元素的<section>元素設置爲高度（例如400px），那麼您將看到table元素佔用該高度的100%。

同樣的，如果你想table填滿整個屏幕，那麼你應該通過設置html或body元件獲得height和100%width開始。

參見本jsFiddle，所述html，body，main和section元件具有全部height和`100％width。

html, body, main, section { 
    height: 100%; 
    width: 100%; 
}