Проблемы с css высота 100% для div

Question

Я разработал страницу aspx в визуальной студии. Моя раскладка что-то вроде этого

<asp:Content ID="Content2" ContentPlaceHolderID="MasterContentPlaceHolder" runat="server"> 
    <div id="setting_wrapper"> 
     <div id="settings_controls"> 
      <ul> 
       <li><a href="javascript:void(0)" id="user"> <span style="padding-left:2%"></span> USER MANAGEMENT</a></li> 
       <li><a href="javascript:void(0)" id="Admin"> <span style="padding-left:2%"></span> EMS</a></li> 
       <li><a href="javascript:void(0)" id="Others"> <span style="padding-left:2%"></span> PRODUCT</a></li> 
       <li><span style="padding-left:2%"></li> 
      </ul> 
     </div> 
     <div id="settings_container"> 
      <iframe id="settings_iframe"> 
      </iframe> 
     </div> 
    </div> 

</asp:Content> 

Если я даю ширину и высоту 100% settings_wrapper работает должным образом в хроме, принимая ширину должным образом. Но в IE и firefox "width:100%" не занят, и мне нужно дать 600px для расширения раздела settings_control. что может быть причиной Applied

CSS являются

#setting_wrapper 
{ 
    position:relative; 
    /*background:yellow;*/ 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 



#settings_controls 
    { 
     position:relative; 
     float:left; 
     width:20%; 
     height:100%; 
     /*background:green*/ 
    } 

#settings_container 
{ 
    position:relative; 
    float:right; 
    width:80%; 
    height:100%; 
    /*background:blue;*/ 
}  

Я даже пытался дать

html, body { 
    height: 100%; 
    width: 100%; 
} 

Answer 1

применять display: table;, которые убедитесь, что работать во всех браузерах.

Answer 2

попробовать это:

#setting_wrapper { 
position:relative; 
width:100%; 
height:100vmin; 
overflow:hidden; 
} 

или твой это:

html, body { 
height: 100vmin; 
width: 100%; 
}