Trying to get table height = 100% in Chrome

I'm trying to make a table that expands when clicked, so it starts off as one row, then two, then three etc, but stay at 100% height. This works fine in FF, IE and Opera, but when I added the third row in Chrome it now starts off as 50% opposed to 100%.

I've looked around for ages, and as it's for a revision plan for an exam in a few days I'm running out of time a bit haha.

So yeah, if anyone could offer any help that'd be super helpful and much appreciated.

(I guess I shouldn't post all my code, so I'll try shorten it to only the relevant bits without the style tags and what not- if anyone wants me to post the rest I can)

  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="toggl开发者_开发知识库eSub();">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>

http://jsfiddle.net/mazlix/FLpFR/ works for me in both chrome and firefox, could you let me know if it gives you problems. Are you using the latest version of chrome?

It seems that for Chrome, you need to make the table row display:none as well as the table cells.

At this JSFiddle, I've set the third table row to display:none at start up, and added the function updateRow3 to set the third row to display:none or not depending on whether any of its table cells are visible.

It seen that if you put a style in for the table row and give it a height of 100%, it will work. So another way to do this would be to give each table row a height in a percentage and then change the height respectively with your JS. I can post the code for this if you want.