您的位置：首页 > Web前端 > HTML

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

2016-10-21 14:51 274 查看

初学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;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航