我正在尝试使用 JavaScript 来设置相对于屏幕分辨率宽度的元素宽度。我会解释一下为什么......我有这张图片:http://i.stack.imgur.com/HeXvu.png
我希望它成为我的标题，因为我不希望它是一个完全静态的图像，我希望标题随屏幕分辨率缩放，所以我设置我的 CSS 和 HTML 是这样的......
HTML:
<html>
<body>
<div class="globalContainer">
<div id="headerMain">
<div class="headerLeft">
</div>
<div class="headerRight">
</div>
</div>
</div>
</body>
</html>
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”获取用户屏幕宽度，然后从值(标题右 flex 部分的宽度)中减去“63”，并将该值设置为主标题元素的宽度，理论上应该可以解决背景问题。唯一的问题是，我几乎没有 JavaScript 经验，也不知道该怎么做，我知道我做的几件事的唯一原因，主要是因为我在几个我的页面...是的。很糟糕。那么，我该怎么办？ o_o
最佳答案
这是您要实现的目标的工作示例 - http://jsfiddle.net/Tq33c/ .
关于JavaScript，不知道我在做什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9882485/