一个 z-index:2 div层 只留下边框其余中间可触发z-index:1的层

失去乐山贼 2011-12-21 10:20:25
div1是z-index:1 ,div1 100%显示在body,
上面有top left right bottom四个层(z-index:2)遮住了div1,
只留下一个小的 400px*400px 的窗口,供点击(点击div1中的内容),
现在要为这个窗口添加一个边框效果,
我再添加四个div width:1px;来做出效果,
可是高度只能通过JS获取,
这样不是一定要刷新后才会有效,


//获取头部高度
var topHeight=$('#top_userinfo').height();
//获取底部高度
var bottomHeight=$('#footer').height();
//得到中间高度
var midHeight=cliHeight-(topHeight+bottomHeight);
//赋值给左右线条层
//alert(midHeight);
$('#bk_right').css("height",midHeight);
$('#bk_left').css("height",midHeight);

浏览器初始打开不是全屏,再点击浏览器最大化,
左右线条层就不会自适应,要再次刷新。
这可怎么解决?
...全文
119 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
失去乐山贼 2011-12-21
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 zsx841021 的回复:]

引用 3 楼 myshow0001 的回复:

获取到 window.onresize事件貌似可以解决这个问题,可是火狐不能触发,还灰屏了。

这个事件火狐下面不好用
[/Quote]
只要不用alert,这个事件是可以触发的。
三石-gary 2011-12-21
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 myshow0001 的回复:]

获取到 window.onresize事件貌似可以解决这个问题,可是火狐不能触发,还灰屏了。
[/Quote]
这个事件火狐下面不好用
失去乐山贼 2011-12-21
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 zsx841021 的回复:]

不是全屏的时候自适应了吗?
[/Quote]
给分你吧,我太傻比了, window.onresize事件可以做到了。FF只要不在这个事件 alert就可以触发。
失去乐山贼 2011-12-21
  • 打赏
  • 举报
回复
获取到 window.onresize事件貌似可以解决这个问题,可是火狐不能触发,还灰屏了。
失去乐山贼 2011-12-21
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 zsx841021 的回复:]

不是全屏的时候自适应了吗?
[/Quote]
div1是全屏的,
其它有四个层 再 z-index:2,left:宽15%,right宽15%, top高100px宽100%; bottom高100px宽100%;
这四个层是又背景颜色的,遮住了div1的部分内容.
中间有个空间,这个空间显示的是div1的内容,
现在要给这个空间加上边框效果。
我的办法是再加z-index:3 的四个1px的层.

#bk_left{
width:1px;
height:auto; //这个就要根据屏幕的大小计算出减去 头部和底部的值
position:absolute;
z-index:5;
background:#6386c8;
float:left;
margin-left:15%;
margin-top:100px;
margin-bottom:100px;}

#bk_top{width:42%;
height:1px;
position:absolute;
z-index:5;
background:#6386c8;
float:left;
margin-top:100px; //头部和底部都是可以固定高度的
margin-left:15%;
}

三石-gary 2011-12-21
  • 打赏
  • 举报
回复
不是全屏的时候自适应了吗?

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧