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;，确保在所有浏览器中都有效。

Answer 2

试试这个：

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

或你的：

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

div的css高度100％的问题

2 个答案: