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

Question

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

我有一个网站，其中所有内容都是相对行的固定弹出窗口，该窗口在按钮点击时打开。此弹出窗口应为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

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

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

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

此外，我在#right-relative-container上将溢出设置为auto，高度设置为100％。

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

结果（gif的质量不高 - 道歉）

<强>演示 http://codepen.io/antibland/pen/eZjxom