1

ビューポートの左側に絶対位置のパネルを作成して、ページの中央にある特定の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の左側までの正確なサイズにする必要があります。

前もって感謝します

4

1 に答える 1

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>

于 2012-12-12T00:29:23.767 に答える