Issues with css height 100% for div

Question

I have developed an aspx page in visual studio. My layout is something like this

<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>

If I give width and height 100% to settings_wrapper it works properly in chrome ,taking the width properly. But in IE and firefox "width:100%" is not taking up and I need to give 600px for expanding the settings_control div. what could be the reason

css applied are

#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;*/  
}    

I even tried giving

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

Answer 1

apply display: table; which make sure to work in all browsers.

Answer 2

try this :

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

or thy this :

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