javascript - 尝试在 Chrome 中获取 table height = 100%

Question

我正在尝试制作一个在单击时展开的表格，因此它从一行开始，然后是两行，然后是三行等等，但保持在 100% 的高度。这在 FF、IE 和 Opera 中运行良好，但当我在 Chrome 中添加第三行时，它现在开始显示为 50%，而不是 100%。

看了好久，因为是过几天考试的复习计划，有点没时间哈哈。

是的，如果有人可以提供任何帮助，那将非常有帮助并且非常感谢。

(我想我不应该发布我所有的代码，所以我会尝试将它缩短到只包含没有样式标签的相关位以及什么不是 - 如果有人希望我发布其余部分我可以)

  function toggleSub() {
if( document.getElementById("hideSub").style.display=='none' ){
document.getElementById("hideSub").style.display = '';
}else{
document.getElementById("hideSub").style.display = 'none';
document.getElementById("hideNeuro").style.display = 'none';
document.getElementById("hideAtypicalBlank").style.display = 'none';
document.getElementById("hideAtypical").style.display = 'none';
}
}
function toggleNeuro() {
if( document.getElementById("hideNeuro").style.display=='none' ){
document.getElementById("hideNeuro").style.display = '';
document.getElementById("hideAtypicalBlank").style.display = 'none';
}else{
document.getElementById("hideNeuro").style.display = 'none';
if(document.getElementById("hideAtypical").style.display == '')
document.getElementById("hideAtypicalBlank").style.display = '';
}
}
function toggleAtypicalBlank() {
if( document.getElementById("hideAtypicalBlank").style.display=='none' && 
document.getElementById("hideNeuro").style.display=='none'){
document.getElementById("hideAtypicalBlank").style.display = '';
}else{
document.getElementById("hideAtypicalBlank").style.display = 'none';
}
}
function toggleAtypical() {
if( document.getElementById("hideAtypical").style.display=='none' ){
document.getElementById("hideAtypical").style.display = '';
}else{
document.getElementById("hideAtypical").style.display = 'none';
}
}


  table#table3{
  margin:0;
  padding:0;
  height:100%;
  border:none
}


<table border="1" id="table3" width="100%">
<tr>
    <th colspan="2"><span onClick="toggleSub();">Drug Therapy</span></th>
</tr>
<tr id="hideSub" style="display:none;" >
    <td width="50%"><span onClick="toggleNeuro();">Neuroleptics</span> </td>
    <td width="50%"><span onClick="toggleAtypical();toggleAtypicalBlank()">Atypical</span> </td>
</tr>
<tr>
    <td id="hideNeuro" style="display:none;">blah blah blah </td>
    <td id="hideAtypicalBlank" style="display:none;"> </td>
    <td id="hideAtypical" style="display:none;">blah blah blah </td>
</tr>

Answer 1

http://jsfiddle.net/mazlix/FLpFR/在 chrome 和 firefox 中都适用于我，如果它给你带来问题，你能告诉我吗？您使用的是最新版本的 chrome 吗？