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

Question

我需要固定父元素内的相对定位的 div。

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

在弹出窗口内，我想要左侧的 fixed div，宽度为 60%，右侧的 relative div(宽度为 40%，自动高度)可用滚动。

其实很难解释所以我做了 fiddle 。在此示例中，我想滚动橙色 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