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

Question

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

这是我的问题的快速解决方法，没有 javascript，因为我不知道该怎么做，以为你们可以帮助我或指出我正确的方向。

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

开始时使用 width: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/

​</p>