当浏览器窗口较大时固定定位元素与另一个元素的距离相同

Question

我整个下午都在努力解决问题。也许这是一个常见的问题，但我在这里或谷歌上找不到类似的东西。我希望你们能帮忙。

我在页面左侧有一个固定的定位元素，我希望当浏览器窗口较大时，该元素与页面上另一个元素之间的距离始终相同。我该怎么办？

现在，必须以百分比设置另一个元素，而固定元素可以是或不是像素。

有没有css calc（），javaScript，jQuery，你可以想到解决这个问题？

HTML

<div class="fixed"></div>
<div class="left-element"></div>

CSS

body {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  min-height: 2000px;
  min-width: 100%;
}

.fixed
{
  position: fixed;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  background-color: blue;
}

.right-element {
  width: 25%;
  height: 200px;
  background-color: yellow;
  margin-left: 75%;
}

以下是Fiddle

Answer 1

我和@Calvin Claus有同样的解决方案，但只需要一个小的css修改，不需要javascript

.right-element {
  width: calc(100% - 400px);
  height: 200px;
  background-color: yellow;
  margin-left: 400px;
}

fiddle

更新：类似，但正如您所问，固定元素上的计算结果。

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  height: 200px;
  width: calc(75% - 200px);
  background-color: blue;
}

.right-element {
  width: 25%;
  height: 200px;
  background-color: yellow;
  margin-left: 75%;
}

new fiddle

Answer 2

我提出了一个简单的jquery解决方案：

var distanceBetwennElems = 100;

function calcRightElemWidth() {
   var rightElemWidth = $(window).width() - ($('.fixed').width() + distanceBetwennElems);
   $('.right-element').css("width", rightElemWidth);
 }

只需在文档准备好并调整窗口大小时调用它。

我也从.right-element css中删除了margin和width，因为这是由js现在完成的：

.right-element {
   height: 200px;
   background-color: yellow;
   float: right;
 }

https://jsfiddle.net/bjrno78p/2/

Answer 3

您可以使用calc调整左侧固定元素的宽度。以下是使用500px作为元素之间所需距离的示例，并使用25%作为右元素的宽度。

.fixed
{
  // disired distance = 500px
  // right-element width = 25%
  width: calc(100vw - 500px - 25%);
}

您更新的fiddle