我正在尝试使用JavaScript来设置相对于屏幕分辨率宽度的元素宽度.我会解释一下为什么……我有这个图像：http://i.stack.imgur.com/HeXvu.png
我希望这是我的标题,我不希望它是一个完全静态的图像,我希望标题与屏幕分辨率一致,所以我设置我的CSS和HTML这样的东西……
HMTL：
CSS：
#headerMain {
height: 79px;
background-image: url(../img/global/middleHeader.png);
background-repeat: repeat-x;
}
.headerLeft {
width: 63px;
height: 79px;
background-image: url(../img/global/leftHeader.png);
background-repeat: no-repeat;
float: left;
}
.headerRight {
width: 63px;
height: 79px;
background-image: url(../img/global/rightHeader.png);
background-repeat: no-repeat;
float: right;
}
现在,我在这里要做的是,为头部的左右固化部分预定义宽度和高度,并使用初始标题div(中间图像设置为背景).我在这里遇到的唯一问题是这个,主div的背景(一个带有标题的中间部分),显示在图像后面是标题的右曲线,如下所示：http://i.stack.imgur.com/XEq85.png
我该如何解决这个问题？我能想到的一种方法是使用JavaScript.这就是我的想法,首先脚本使用“screen.width”获取用户屏幕宽度,然后从值(标题的右弯曲部分的宽度)中减去“63”,并将该值设置为主标题元素的宽度,理论上应该解决背景问题.唯一的问题是,我几乎没有JavaScript经验而且不知道如何做任何事情,我知道我做的一些事情的唯一原因,主要是因为我已经复制/粘贴了一些其他JS代码我的页面…是的很糟糕.那么,我该怎么办？ O_O
最佳答案
您可以尝试从headerMain div中取出左右标题div并将它们放在DOM中的相同级别.然后使用这个修改过的CSS：
@H_403_37@#headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;}
.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;}
.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}
