divs height in % is not working in ie - css

Question

I am creating a web page ; where i would like to show 4 predefined divs on treeview checkbox selection.
Divs are showing perfectly fine in chrome and mozilla Firefox but the height in % is not working in Internet Explorer 9 and IE11.
I am setting the divs height and width in %. Divs width in % is working but height is not.
Please help me.
for (var y = 1; y <= value; y++)
{
var player_Parent=$('[id$=divView_' + y + ']');
append_Player(noOfPlayers, player_Parent);
}
function append_Player(no_of_Players, player_Parent_iOS)
{
if (no_of_Players == 1)
{ $(player_Parent_iOS).attr('class','single'); }
else if (no_of_Players == 2)
{ $(player_Parent_iOS).attr('class', 'double'); }
}
CSS is as following..
.single
{
height:100%; width:100%; display:block; border-width:thin;
}
.double
{
height:100%; width:50%; border-width:thin; border-style:solid;
}
Divs are as follows:
<div id="divView_1" hascombo="false" isloaded="false" onclick="click(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
style="position:relative; background-color:#99D9EA; float: left; display: block;">
<div id="container_1" style="background-color:Yellow; width: 100%; height: 100%; position:relative;float: right; background-color: transparent;">
</div>
</div>
<div id="divView_2" hascombo="false" isloaded="false" onclick="click(event)" ondragover="allowDrop(event)" ondrop="drop(event)" style="background-color:#99D9EA; top:-100%; position:relative; display: block;float: right;">
<div id="container_2" style="background-color:Yellow; width: 100%; height: 100%; float: right; position:relative; background-color: transparent;">
</div>
</div>
<div id="divView_3" hascombo="false" isloaded="false" onclick="click(event)" ondragover="allowDrop(event)" ondrop="drop(event)" style="background-color:#99D9EA; position:relative;display:block; float:left;">
<div id="container_3" style="background-color:Yellow; width: 100%; height: 100%; position:relative;float: left; background-color: transparent;">
</div>
</div>
<div id="divView_4" hascombo="false" isloaded="false" onclick="click(event)" ondragover="allowDrop(event)" ondrop="drop(event)" style="background-color:#99D9EA; position:relative; display: block;float: right;">
<div id="container_4" style="background-color:Yellow; width: 100%; height: 100%;position:relative; float: right; background-color: transparent;">
</div>
</div>

Answer 1

without the rest of the code it is all guesswork.
* did you give 100% height to the parent?
* did you give height 100% to body and html (in case all design is responsive)?
* i can see the divView_1 style top property is missing semicolon.
Need more details on the rest of the code.