Question

我正在尝试为网页创建叠加层。但是，叠加层中的内容不会占用叠加层的高度，而是页面高度

#detail {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  z-index: 2;
  border: 2px solid red;
}

#full {
  position: relative;
  overflow: auto;
  border: 2px solid green;
}

  <div id='detail'>
    <div>
      <h2>Summary</h2>
      This is intended to be the summary of the "lorem ipsum" text that follows
    </div>
    <div id='full'>
      <h3>Complete article</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>

我尝试了多种变体，例如在相对位置之间插入中间，但是#full容器仍假定屏幕高度

Answer 1

通过计算出的高度，您可以实现我想要的。

#detail {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  z-index: 2;
  border: 2px solid red;
}

#full {
  position: relative;
  overflow: auto;
  border: 2px solid green;
  height: calc(100% - 110px);
}

<div id='detail'>
    <div>
      <h2>Summary</h2>
      This is intended to be the summary of the "lorem ipsum" text that follows
    </div>
    <div id='full'>
      <h3>Complete article</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>

将内容限制在绝对放置的容器中

1 个答案: