如何在100％的td内获得div高度100％ [英] How to get div height 100% inside td of 100%
问题描述
这个问题似乎在stackoverflow上已经被问过至少十次了，但实际上没有一个人有答案.这一问题与Firefox出现的问题稍有不同.
This question seems to have been asked at least 10 other times here on stackoverflow but not one of them actually has an answer. This one is slightly different in that the issue appears in Firefox.
我的table身高为100％，而tr的身高为100％.我将td的边框设置为可以看到的内容.我看到td是预期的100％.我在td中放入了div，并将其设置为高度100％.在Chrome中是100％.在Firefox中不是100％.
I have a table height 100%, with a tr height 100%. I set the border of the td to something I can see. I see that the td is 100% as expected. I put a div in that td and set it to height 100%. It's 100% in Chrome. It's NOT 100% in Firefox.
我该如何解决?
示例
<!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中，您会看到
In Chrome you'll see
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％(显然在两种情况下都是如此).是黑色的错了.
where b = blue td. # = black div that should be 100%. r = red inner div that should also be 100% (and apparently is in either case). It's the black one that's wrong.
在这种情况下，我必须修复哪些CSS才能使Firefox表现得像Chrome?
What CSS do I have to fix to get Firefox to behave like Chrome in this case?
PS:是的，我需要一张桌子.我正在显示表格数据.上面的示例简化为单个单元，以简化调试.
PS: Yes I need a table. I'm displaying tabular data. The example above is simplified to a single cell to simplify debugging.
推荐答案
您还需要将td的高度设置为100％:
You need to set the height of the td to 100% too:
<td style="height: 100%">
这篇关于如何在100％的td内获得div高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
