固定父元素中的相对定位div

Question

固定父元素中的相对定位div

javascripthtmlcsscss-position

3

我需要在一个固定的父级元素内创建相对定位的 div。

我的网站上，除了在按钮点击时打开的固定弹出窗口之外，其他所有内容都是相对定位的。这个弹出窗口应该是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/

- Fale1994

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy Hoffman · Accepted Answer

为了消除蓝色区域的滚动条，我需要移除在 #container 上设置的 1200px 高度，并将该值替换为 100%。只有父元素也设置了 100% 高度，100% 高度才会生效。因此，需要设置这个 100% 高度的父元素是文档根元素和 body 元素。

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

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

此外，我在#right-relative-container上设置了overflow为auto和height为100%。

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

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

Demo http://codepen.io/antibland/pen/eZjxom