css - 并排比例宽度 div 上的空白问题

Question

我目前有两个并排的 div，每个都设置为页面的宽度，以便我可以横向滚动。右侧的 div 需要准确地窥视左侧 40 像素，以便在页面加载时可见。我已经设法（在很多帮助下）使那部分正常 - 现在的问题是右侧 div 的边缘和页面边缘之间有 40px 的间隙 - 如下所示：

jsFiddle

关于如何摆脱它的任何想法？非常感谢您的帮助。“窥视”区域必须保持 40 像素，因此使用百分比似乎是个问题。哦，对于垂直形式的外观示例，这里有一个示例。

干杯。

Answer 1

你能像这个jsFiddle 例子那样伪造它吗？

我将滚动右块 ( <p>scroll right --></p>) 移到了包装器之外（你没有提到是否需要在那里）。然后我将相同的颜色应用于包装并添加overflow:auto;到其中。

Answer 2

您的容器有 200% 的宽度并导致扩展问题。

你需要减小它的大小。这有点困难，因为您的宽度以 % 为单位，而您的负偏移量以 px 为单位。

您可以做的是将偏移量更改为百分比并将其从容器中取出。您还需要使用 margin-left 而不是 left。

这在 chrome 检查器中对我有用：

#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/