左列应扩展以填充第二列css的间隙

Question

如果我有两列并排，我希望第一列占用剩余空间，具体取决于第二列的大小。

所以在fiddle

中

.container {
  width: 100%;
}

#leftColumn {
  background-color: blue;
  width: 50%;
  height: 100vh;
  float: left;
}

#rightColumn {
  background-color: yellow;
  width: 50%;
  height: 100vh;
  float: left;
}

当调整第二列的大小时，蓝色列应该加宽以将黄色列移动到浏览器的边缘，这样视图中就没有额外的空间。

如何为css中的第一列设置此内容？

Answer 1

在调整黄色调整

时，将蓝色div的宽度更改为calc(100% - widthOfYellow)

＆＃13;

＆＃13;

window.resizeRightColumn = function() {
  $('#rightColumn').width('100px');
  $('#leftColumn').width('calc(100% - 100px)');
}

＆＃13;

.container {
  width: 100%;
}

#leftColumn {
  background-color: blue;
  width: 50%;
  height: 100vh;
  float: left;
}

#rightColumn {
  background-color: yellow;
  width: 50%;
  height: 100vh;
  float: left;
}

#button {
  position: absolute;
  top: 5px;
  left: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="leftColumn">

  </div>
  <div id="rightColumn">

  </div>
</div>
<button id='button' onclick='resizeRightColumn()'>
Resize
</button>

＆＃13;

＆＃13;

＆＃13;