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

来源：互联网发布：搜狗音乐软件下载编辑：程序博客网时间：2024/05/29 13:26

初学HTML，其中有这样一个例子：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>table,td,th{    border:1px solid black;}table{    width:100%;}th{    height:50px;}</style></head><body><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Peter</td><td>Griffin</td><td>$100</td></tr><tr><td>Lois</td><td>Griffin</td><td>$150</td></tr><tr><td>Joe</td><td>Swanson</td><td>$300</td></tr><tr><td>Cleveland</td><td>Brown</td><td>$250</td></tr></table></body></html>

运行结果如下：

将高度也设置为100%，即

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

运行后，表格的高度没有变化。原因：

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

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

0 0