css - 横に並んだプロポーショナル幅の div での空白の問題

Question

現在、横にスクロールできるように、それぞれがページの幅に設定された 2 つの横並びの div があります。右側の div は、ページの読み込み時に表示されるように、左側に正確に 40 ピクセルを覗く必要があります。私は（多くの助けを借りて）その部分をうまく取得することができました-問題は、右側のdivの端とページの端の間に40pxのギャップがあることです-以下に示す：

jsフィドル

それを取り除く方法についてのアイデアはありますか？助けてくれてありがとう。「ピーク」領域は正確に 40 ピクセルのままにする必要があるため、パーセンテージを使用すると問題が発生するようです。ああ、これが縦の形でどのように見えるかの例として、ここに例があります.

乾杯。

Answer 1

コンテナの幅は200％で、拡張の問題が発生しています。

サイズを小さくする必要があります。幅が％で、負のオフセットがpxであるため、少し難しいです。

あなたができることは、オフセットをパーセンテージに変更し、それをコンテナから取り出すことです。また、左ではなく左マージンを使用する必要があります。

これはクロームインスペクターで私のために働きます：

#wrapper {
  width: 199%;  /* change here */
  position: relative;
}

#right {
  float: right;
  width: 50%; 
  background-color:cyan;
  position: relative;
  margin-left: -1%; /* and here */
}

フィドル： http： //jsfiddle.net/hUyBq/

*編集：* 1％は例ですが、もっと必要な場合があります。それに応じてラッパーを更新します

*編集：* JSを使用したソリューション：http：//jsfiddle.net/bendog/wP4zb/

Answer 2