设置垂直固定位置和水平绝对位置的DIV。

Question

我正在创建一个由三个元素组成的网站，一个标头，带有内容的左div和带有图像的右div。

我将左和右div设置为窗口的百分比，但是我想为容器设置最小宽度（并因此设置左和右div的最小宽度），在该宽度下方将出现水平滚动，而右div从窗口的右手滚动。在最小窗口宽度以上，右div应该固定在屏幕的右侧。

很容易，但是我想将右div垂直固定在其位置，以便仅左div滚动。

我确信这对于CSS专家来说确实很容易，但是这让我很困惑。当将右div更改为绝对值时，它消失在屏幕的底部，当我将其设置为固定值时，当屏幕宽度变窄时，它会与左div重叠。

JS小提琴here

HTML：

    <div class="container">
  <div class="left">
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div> 
    <div class="child">Child</div>    
  </div>
  <div class="right">
  Right Box
  </div>  
  <div class="header">
  Header
  </div>
</div>

CSS

.container {
  background-color: #BC1417;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  min-width:600px;
}
.right {
  width: 50%;
  height: 400px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  background-color: #3ED623;
  min-width: 300px;
}
.left {
  width: 45%;
  height: 1700px;
  position: absolute;
  top: 200px;
  left: 0px;
  margin-left: 5%;
  margin-bottom: 80px;
  background-color: #120C98;
  min-width: 270px;
}
.header {
  width: 100%;
  height: 100px;
  position: fixed;
  background-color: #B210C8
}
.child {
  width: 90%;
  height: 300px;
  left: 5%;
  background-color: #F8FF00;
  border: 2px solid #62495D;
  position: relative;
  margin-top: 30px;
}