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

Question

我需要在固定父级内相对定位的 div。

我有一个网站，其中所有内容都是相对的，例如 fixed 弹出窗口，该窗口在单击按钮时打开。这个弹出窗口应该是 100% 的宽度和 100% 的高度，所以它会覆盖整个页面。

在弹出窗口内我想要 fixed div 在左侧，宽度为 60%，relative 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 上将溢出设置为自动，高度设置为 100%。

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

结果（gif的质量不是很好——抱歉）

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