javascript - div 的 css 高度 100% 的问题

Question

我在 visual studio 中开发了一个 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>

如果我将 settings_wrapper 的宽度和高度设置为 100%，它在 chrome 中可以正常工作，并正确地获取宽度。但是在 IE 和 firefox 中 "width:100%" 没有占用，我需要给 600px 来扩展 settings_control div。可能是什么原因

应用的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; 确保在所有浏览器中工作。