这个问题似乎在stackoverflow上至少有10次,但是其中一个实际上没有答案.这一点略有不同,因为问题出现在Firefox中.
我的桌子高度为100％,高度为100％.我把td的边界设置成可以看到的东西.我看到td是预期的100％.我把一个div放在那个td里,把它设置为100％.在Chrome中是100％.在Firefox中不是100％.
我该如何解决？
例
<!DOCTYPE html>
<html>
<head>
<style>
body,html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.full {
width: 100%;
height: 100%;
border: 10px solid red;
}
#content {
width: 100%;
height: 100%;
}
#content>table {
width: 100%;
height: 100%;
}
#content>table>tbody>tr>td {
border: 10px solid blue;
width: 50%;
}
#container {
width: 100%;
height: 100%;
border: 10px solid black;
}
</style>
</head>
<body>
<div id="content">
<table>
<tr>
<td>
<div id="container">
<div class="full">
foo
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
这是一个片段
body,html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.full {
width: 100%;
height: 100%;
border: 10px solid red;
}
#content {
width: 100%;
height: 100%;
}
#content>table {
width: 100%;
height: 100%;
}
#content>table>tbody>tr>td {
border: 10px solid blue;
}
#container {
width: 100%;
height: 100%;
border: 10px solid black;
}
<div id="content">
<table>
<tr>
<td>
<div id="container">
<div class="full">
foo
</div>
</div>
</td>
</tr>
</table>
</div>
在Chrome中,您会看到
bbbbbbbbbbb b#########b b#rrrrrrr#b b#r r#b b#r r#b b#r r#b b#rrrrrrr#b b#########b bbbbbbbbbbb
而在Firefox它是
bbbbbbbbbbb b b b#########b b#rrrrrrr#b b#r r#b b#rrrrrrr#b b#########b b b bbbbbbbbbbb
其中b =蓝色td. #=黑色div应该是100％. r =红色内部div,也应该是100％(显然是在任一情况下).这是黑色的错误.
在这种情况下,我需要修复什么CSS以使Firefox像Chrome这样的行为？
PS：是的,我需要一张桌子.我正在显示表格数据.以上示例简化为单个单元以简化调试.
解决方法
您还需要将td的高度设置为100％：
<td style="height: 100%">
