如何在100%的td内获得100%的div高度
如何在100%的td内获得100%的div高度
提问于 2013-08-28 20:38:10
这个问题似乎已经在stackoverflow上被问了至少10次，但实际上没有一个人有答案。这次稍有不同，因为这个问题出现在Firefox中。
我有一个100%的table高度，一个100%的tr高度。我将td的边框设置为我可以看到的内容。我看到td达到了预期的100%。我在那个td中放了一个div，并将其高度设置为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。#=应该是100%的黑色div。R=红色内部div，也应该是100% (显然在任何一种情况下都是)。是那个黑色的错了。
在这种情况下，我必须修复什么CSS才能让Firefox的行为像Chrome一样？
PS:是的，我需要一张桌子。我正在显示表格数据。上面的例子被简化为一个单元，以简化调试。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18488148
复制相关文章
相似问题