61,112
社区成员
发帖
与我相关
我的任务
分享div中top和height使用百分比无效的问题
各位高手，小弟新手请教一个比较低级的问题
我在login.jsp中使用div将几个text框和一个botton定位到背景图上相应的位置。但是我在css中对height和top使用百分比时无效，但使用像素又是可以的。我百度了该情况，一般都说是因为IE默认body的height为空的，必须定义body的height才可以。但我已定义了body的height为了100％，仍然无效。只好请教各位高手了。下面是具体的代码：
css文件中作了几个定义：
.loginBg{
background-repeat:no-repeat;
background-position:center top;
background-image:url(../images/loginBackGroud.jpg);
background-attachment:fixed;
margin: 0px;
width:100%;
height:100%;
}
.loginTableTop{
position:relative;
float:center;
top:14.29%;
/*top:100px;*/
width:50%;
height:53.57%;
z-index:999;
background-color:green;
}
.loginTable{
position:relative;
float:center;
left:0%;
top:46.86%;
/*top:328px;*/
width:30%;
height:17.86%;
/*height:125px;*/
z-index:999;
background-color:red;
}
.loginTableBottom{
position:relative;
float:center;
width:80%;
heigth:32.86%;
top:500px;
z-index:999;
background-color:blue;
}
我在login.jsp文件中是这样使用的
<html>
<body class="loginBg">
<center>
<form action="/OfficeInformationPlatForm/login.action" method="post">
<table border="0" align="center" class="loginTableTop">
<tr>
<td>
</td>
</tr>
</table>
<table border="0" align="center" class="loginTable">
<tr>
<td>
<div id="d0" style="position:relative; width:10%; height:21.43%; z-index:999; top:0%; left:0%; overflow-scroll; overflow-scroll;">
<table style="table-layout:fixed">
<tr>
<td>
<input name="userName" type="text" class="inputTextStyle">
</td>
</tr>
</table>
</div>
<div id="d1" style="position:relative; width:10%; height:21.43%; z-index:999; top:36.03%; left:0%; overflow-scroll;overflow-scroll;">
<table style="table-layout:fixed">
<tr>
<td>
<input name="userPassword" type="password" class="inputTextStyle" onKeyPress="processKey(event);">
</td>
</tr>
</table>
</div>
<div id="d2" style="position:relative; width:10%; height:21.43%; z-index:999; top:77.8%; left:0%; overflow-scroll;overflow-scroll;cursor:hand" onclick="login()">
<table style="table-layout:fixed">
<tr>
<td>
<input name="LoginBtn" type="submit" value="Login">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
我在login.jsp中使用div将几个text框和一个botton定位到背景图上相应的位置。但是我在css中对height和top使用百分比时无效，但使用像素又是可以的。我百度了该情况，一般都说是因为IE默认body的height为空的，必须定义body的height才可以。但我已定义了body的height为了100％，仍然无效。只好请教各位高手了。下面是具体的代码：
css文件中作了几个定义：
.loginBg{
background-repeat:no-repeat;
background-position:center top;
background-image:url(../images/loginBackGroud.jpg);
background-attachment:fixed;
margin: 0px;
width:100%;
height:100%;
}
.loginTableTop{
position:relative;
float:center;
top:14.29%;
/*top:100px;*/
width:50%;
height:53.57%;
z-index:999;
background-color:green;
}
.loginTable{
position:relative;
float:center;
left:0%;
top:46.86%;
/*top:328px;*/
width:30%;
height:17.86%;
/*height:125px;*/
z-index:999;
background-color:red;
}
.loginTableBottom{
position:relative;
float:center;
width:80%;
heigth:32.86%;
top:500px;
z-index:999;
background-color:blue;
}
我在login.jsp文件中是这样使用的
<html>
<body class="loginBg">
<center>
<form action="/OfficeInformationPlatForm/login.action" method="post">
<table border="0" align="center" class="loginTableTop">
<tr>
<td>
</td>
</tr>
</table>
<table border="0" align="center" class="loginTable">
<tr>
<td>
<div id="d0" style="position:relative; width:10%; height:21.43%; z-index:999; top:0%; left:0%; overflow-scroll; overflow-scroll;">
<table style="table-layout:fixed">
<tr>
<td>
<input name="userName" type="text" class="inputTextStyle">
</td>
</tr>
</table>
</div>
<div id="d1" style="position:relative; width:10%; height:21.43%; z-index:999; top:36.03%; left:0%; overflow-scroll;overflow-scroll;">
<table style="table-layout:fixed">
<tr>
<td>
<input name="userPassword" type="password" class="inputTextStyle" onKeyPress="processKey(event);">
</td>
</tr>
</table>
</div>
<div id="d2" style="position:relative; width:10%; height:21.43%; z-index:999; top:77.8%; left:0%; overflow-scroll;overflow-scroll;cursor:hand" onclick="login()">
<table style="table-layout:fixed">
<tr>
<td>
<input name="LoginBtn" type="submit" value="Login">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
...全文
请发表友善的回复…
发表回复
kinghome 2013-04-28
- 打赏
- 举报
ie9 以下 使用 position:ralative 的块级 元素使用 高度百分比是无效的。
firefox,webkit浏览器就起作用。
为了兼容各款浏览器，建议你加入min-height属性
还有你现在的布局实在是太糟糕了，表格使用过度了
你把你想要的效果图贴上来，我再看看怎么帮你吧。
zhong_pj 2013-04-28
- 打赏
- 举报
你的意思是DIV中style="position:ralative"改为absulte？
但是这样的话，当浏览器窗口大小发生改变的时候，位置就会发生改变呀
如果我还是想用relative的话，怎么设置高度呢
kinghome 2013-04-28
- 打赏
- 举报
背景 和 登录框 必须分离出来，不然不好定位。
加Q 225733202
zhong_pj 2013-04-28
- 打赏
- 举报
对，我是想让<input type=text>正好和地图的登陆框重合
从视觉上是在底图的登陆框那里进行输入帐户密码
kinghome 2013-04-28
- 打赏
- 举报
你是不是想实现 登录对话框屏幕居中啊？
zhong_pj 2013-04-28
- 打赏
- 举报
这是背景图：
我的想法是将用户框、密码框和登录做到地图的位置。位置为相对的，可以随着浏览器大小变化自动调节
但是高度无效
我的想法是将用户框、密码框和登录做到地图的位置。位置为相对的，可以随着浏览器大小变化自动调节
但是高度无效
kinghome 2013-04-27
- 打赏
- 举报
只有当DIV是绝对定位时，高度才能使用百分比
zhong_pj 2013-04-26
- 打赏
- 举报
没人愿意帮忙吗？？？？？
