固定父级内部的相对定位div

Question

我需要固定父母内部的相对定位div。

我有一个网站，其中一切都是相对exept 固定弹出窗口，点击按钮打开。 此弹出窗口应为100％宽度和100％高度，因此它覆盖整个页面。

在弹出窗口里面，我希望左边是固定的 div，宽度是60％，右边是相对 div（40％宽度，自动高度）可以滚动。

事实上，很难解释所以我做了小提琴。 在这个例子中，我想滚动橙色div而不是滚动蓝色div。 是否可以更改滚动条焦点？

<div id='container'>
  <div id='inside-fixed-div'>
    <div id='left-fixed-container'></div>
    <div id='right-relative-container'>
    </div>
  </div>
</div>

https://jsfiddle.net/87x8dwn6/

Answer 1

要删除蓝色滚动，我需要删除#container上设置的1200px高度并将该值替换为100％。 除非父母的身高也是100％，否则100％的身高将无效。 因此，需要这个100％高度的父母将是文件的根和身体。

html, body {
  margin: 0;
  height: 100%;
}

#container{
  ...
  height: 100%;
}

另外，我在#right-relative-container上设置溢出为auto和height为100％。

#right-relative-container{
  ...
  height: 100%;
  overflow: auto;
  ...
}

结果 （gif的质量不是很好 - 道歉）

演示 http://codepen.io/antibland/pen/eZjxom