css - 以 % 表示的 divs 高度在 ie 中不起作用

Question

我正在创建一个网页；我想在 treeview 复选框选择上显示 4 个预定义的 div。Div 在 chrome 和 mozilla Firefox 中显示完美，但以百分比表示的高度在 Internet Explorer 9 和 IE11 中不起作用。

我正在以 % 为单位设置 div 的高度和宽度。以 % 表示的 divs 宽度有效，但高度无效。请帮助我。

 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 如下..

 .single 
  {
     height:100%; width:100%; display:block; border-width:thin;
  }
 .double
  {
    height:100%; width:50%; border-width:thin;  border-style:solid;
   }

div如下:

 <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

如果没有其余代码，一切都是猜测。* 你给 parent 100%的高度了吗？* 你是否将 100% 的高度赋予 body 和 html(以防所有设计都是响应式的)？* 我可以看到 divView_1 样式的顶部属性缺少分号。

需要有关其余代码的更多详细信息。