Question

我有一个绝对定位于CSS的div。这个div有溢出：auto所以有时它会显示一个滚动条，如果它有很多内容。我需要用另一个div完全覆盖div，这个半透明，以便完全覆盖第一个div。

问题是当外部div中显示滚动条时，叠加div不会覆盖它。

我的HTML

    <div id="outer">
      <div id="content">
          1<br/>2<br/>3<br/>4<br/>5<br/>
          6<br/>7<br/>8<br/>9<br/>10<br/>
          11<br/>12<br/>13<br/>14<br/>15<br/>
      </div>
      <div id="overlay">
      </div>
    </div>

我的CSS

  div#outer {
    overflow: auto;
    position: absolute;
    top: 60px;
    left: 20px;
    height: 200px;
    width: 200px;
    border: 3px solid blue;
  }

  div#content {
    background-color: lightgray;
  }

  div#overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: yellow;
    opacity: 0.8;
    z-index: 2;
  }

在此处运行：

http://jsfiddle.net/pTnXF/4/

有什么想法吗？

Answer 1

将#overlay放在#content中并向#content添加“position：relative”可能有效。

http://jsfiddle.net/pTnXF/5/

HTML 更改

<div id="outer">
  <div id="content">
    1<br/>2<br/>3<br/>4<br/>5<br/>
    6<br/>7<br/>8<br/>9<br/>10<br/>
    11<br/>12<br/>13<br/>14<br/>15<br/>
    <div id="overlay">
    </div>
  </div>
</div>

CSS 更改

div#content {
background-color: lightgray;
position: relative;
}

Answer 2

jquery的

$("#overlay").css("height",($('#outer')[0].scrollHeight));

如何将div完全放在另一个div上，溢出：auto

2 个答案: