HTML中的高度设置为百分数的问题

初学HTML,其中有这样一个例子:





菜鸟教程(runoob.com)




Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250


运行结果如下:HTML中的高度设置为百分数的问题_第1张图片

将高度也设置为100%,即

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

运行后,表格的高度没有变化。原因:

百分比是相对的,table的宽度和高度,是根据父元素计算基数,得到基数*100% 的宽度和高度。

在这里,table的父元素是body,body的默认宽度整个浏览器窗口的宽度,body在没有设置具体值时会自动默认百分比来定义宽度。因此电脑显示器尺寸不同body具体值也会不同。浏览器默认状态 下,是没有给body一个高度属性的,因此当我们直接设置table的height:100%;时,不会产生任何效果。如果想设置table的高度,可以用像素来设置,即:height:50px;

你可能感兴趣的:(HTML+CSS)