Как контролировать ширину одного блока путем вычитания ширин 2 других из ширины окна

Question

Есть 3 блока. Левый, средний, правый. У левого блока width: 25%; min-width: 150px;. У правого блока width: 7%; min-width: 85px;. Нужно вычислять ширину среднего блока из 100vw(document.documentElement.clientWidth) - ширина левого блока - ширина правого блока. Есть такой код на js, но он работает не так, как нужно...:

var lWidth = document.querySelector(".l-menu").offsetWidth;
var rWidth = document.querySelector(".r-menu").offsetWidth;

document.addEventListener("DOMContentLoaded", function (event) {
  window.onresize = function () {
    resize_info();
  };
});
function resize_info() {
  var mWidth = document.documentElement.clientWidth - rWidth - lWidth;
  document.querySelector(".m-menu").style.width = mWidth + "px";
  console.log(document.querySelector(".m-menu").offsetWidth);
}

Не работает так: при увеличении экрана блок все время увеличивается, пока не займет всю ширину экрана, при уменьшении он будет уменьшаться, пока не сработает @media...

Answer 1

Участие JavaScript в верстке страницы - это очень плохая идея.

.left{
  width: 25%;
  min-width: 150px;
  height: 60vh;
  float:left;
  border: 1px solid red;
  background: #fcc;
}
.right{
  width: 7%;
  min-width: 85px;
  height: 60vh;
  float:right;
  border: 1px solid red;
  background: #cfc;
}

.medium{
  height: 60vh;
  border: 1px solid red;
  background: #ccf;
}

https://jsfiddle.net/62pwbj7h/

Answer 2

а почему бы не воспользоваться флексами?

.container {
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    space-between;

    width:      50vw;
    height:     100px;
    
    border:     1px solid black;
}

.left {
    width:      25%;
    min-width:  150px;
    
    background: orange;
}

.right {
    width:      7%;
    min-width:  85px;
    
    background: lime;
}

.center {
    width:      calc(100% - 25% - 7%);
    
    background: blue;
}

<div class = "container">
  <div class = "left">1</div>
  <div class = "center">2</div>
  <div class = "right">3</div>
</div>

БЛОГ НА HUSL

Как контролировать ширину одного блока путем вычитания ширин 2 других из ширины окна

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