我在 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%;
}
最佳答案
应用 display: table;
确保在所有浏览器中工作。
关于javascript - div 的 css 高度 100% 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21545270/