表百分比高度和宽度的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%什么？如果您将<section>的父table元素设置为400px的高度，那么您将看到table元素占用{{1那个高度。

同样，如果您希望100%填满整个屏幕，那么您应该首先将table或html元素设置为body和{{ 1 {} height。

查看此jsFiddle，width，100%，html和body元素包含main和section “100％。

height