Jquery来获取左视口到页面上特定div之间的宽度

Question

我正试图让一个在视口左侧具有绝对位置的面板的宽度一直延伸到页面中心的特定div，考虑到我的网站是响应的，我需要这个div根据视口大小具有动态宽度。

这是我的问题的一个快速解决方案，没有javascript，因为我不知道如何解决这个问题，以为你们可以帮助我或为我指明正确的方向。

http://jsfiddle.net/jA3JU/3/

使用宽度：40%在开始时很好，但一旦使用视口的宽度，40%就会变小。

#square {
background-color:#000;
height:200px;
width:200px;
margin:auto;
}
#mask {
background-color:#000;
height:100%;
width:40%;
position:absolute;
left:0;
top:0;
}

我需要#mask的宽度是从视口左侧到#square左侧的确切大小。

提前感谢

Answer 1

不确定小提琴是否不喜欢我的window.outerWidth行，但喜欢。

var sizingMaskDiv = function () {
var squareWidth = $('#square').width(),
maskWidth = (window.outerWidth - squareWidth) / 2,
finalWidth = maskWidth - squareWidth;
$('#mask').css('width', finalWidth + "px");
}
// Sets initial width
sizingMaskDiv();
$(window).resize(function() {
//on window resize, run function (can get slow)
sizingMaskDiv();
});

http://jsfiddle.net/jA3JU/17/

​