Jquery рассчитать расстояние от блока до края

Question

Есть такая структура. Центральный блок и по сторонам от него 2 блока с position:absolute. Нужно чтоб эти боковые блоки заполняли все место от центрального блока до края браузера. Я так понимаю, это можно сделать на jquery, рассчитав пространство между краем и центральным блоком и задать его боковым блокам. Плюс еще нужно чтоб при изменении ширины экрана, размер динамически подстраивался. Кто поможет сделать? спасибо

Update. Весь нюанс в том, что используется именно absolute. Поэтому нужно именно на jquery рассчитать это.

* {
  margin: 0;
  padding: 0;
}

.block {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: blue;
}

.element-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: violet;
}
.element-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<div class="element-left"></div>
<div class="element-right"></div>

Answer 1

Можно использовать calc() и вычислять размер динамически относительно ширины экрана и опять не нужен будет jQuery:

width: calc((100% - 300px) / 2);

правда есть недостаток - если ширина экрана меньше 300px + чуть-чуть - тогда блоки будут залезать на центральный блок

тогда не нужно использовать никакой jQuery:

* {
  margin: 0;
  padding: 0;
  
  height: 200vh;
}

.block {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background: blue;
}

.element-left {
  position: absolute;
  left: 0;
  top: 0;
  width: calc((100% - 200px) / 2);
  height: 100px;
  background: violet;
}

.element-right {
  position: absolute;
  right: 0;
  top: 0;
  width: calc((100% - 200px) / 2);
  height: 100px;
  background: lime;
}

<div class="block"></div>
<div class="element-left"></div>
<div class="element-right"></div>

Может чуть-чуть передалать код и использовать только flex?

* {
  margin: 0;
  padding: 0;
}

.parent {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.block {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: blue;
}

.element-left {
  flex-grow: 1;
  height: 100px;
  background: violet;
}

.element-right {
  flex-grow: 1;
  height: 100px;
  background: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="element-left"></div>
  <div class="block"></div>
  <div class="element-right"></div>
</div>

Answer 2

Если ширина центрального блока нам известна, то ширина боковых блоков будет 50% экрана - половина_ширины_центрального_блока. Для рассчёта этой величины не нужен js. Достаточно css-свойства calc() :

* {
  margin: 0;
  padding: 0;
}

.block {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: blue;
}

.element-left,
.element-right{
  position: absolute;
  top: 0;
  width: calc(50% - 150px);
  height: 100px;
  background: violet;
  
}
.element-left {  
  left: 0;  
}
.element-right {
  right: 0;
}

<div class="block"></div>
<div class="element-left"></div>
<div class="element-right"></div>

БЛОГ НА HUSL

Jquery рассчитать расстояние от блока до края

Ответы (2 шт):