css - 有没有办法在溢出时在绝对定位的 div 滚动中制作一个 div？

Question

我正在尝试通过设置百分比最大高度和 overflow: scroll; 来解决模态内容溢出的问题。

模态框是绝对定位的，有些响应，在检查器中我可以看到它的高度设置正确。我的问题是我无法为模态内容设置基于百分比的高度。

非常准确地复制了我要解决的问题:

<div class="first">
  <div class="second">
    <div class="header"><h2>Header</h2></div>
    <div class="content">
      <ul>
        <li>Asdf</li><li>Asdf</li><li>Asdf</li><li>Asdf</li>
        <li>Asdf</li><li>Asdf</li><li>Asdf</li><li>Asdf</li>
        <li>Asdf</li><li>Asdf</li><li>Asdf</li><li>Asdf</li>
      </ul>
    </div>
  </div>
</div>

.first {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.second {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 8%;
  bottom: auto;
  padding: 20px;
  max-height: 80%;

  border: 2px solid black;
  border-radius: 4px;
  background: red;
}

.content {
  width: 50%;
  height: 1%;
  overflow: scroll;

  border: 2px solid black;
  border-radius: 4px;
  background: green;
}

li {
  width: 2000px;
  height: 100px;

  border: 1px solid black;
  border-radius: 4px;
}

我希望 content div 能够根据其父级(second div)的百分比设置高度并且不会溢出，但它的高度似乎完全不受限制。

在保持 second div 的响应特性的同时解决这个问题的最佳方法是什么？为什么在这种情况下设置 content div 的高度不起作用？

Answer 1

需要在父元素(.second)中添加一个height，让.content计算自己的高度 来自。请记住，height 值向下级联。如果你想让一个元素有一个相对的 height，你需要在它的层次结构中的某个点有一个固定的 height，每个元素在目标元素和具有固定 height 的元素也具有相对 height。

在这种情况下，只需在 .second 上将 height 设置为 100% 即可获得所需的结果:

.first {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.second {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 8%;
  bottom: auto;
  padding: 20px;
  max-height: 80%;
  border: 2px solid black;
  border-radius: 4px;
  background: red;
  height: 100%;
}

.content {
  width: 50%;
  height: 20%;
  overflow: scroll;
  border: 2px solid black;
  border-radius: 4px;
  background: green;
}

li {
  width: 2000px;
  height: 100px;
  border: 1px solid black;
  border-radius: 4px;
}

<div class="first">
  <div class="second">
    <div class="header">
      <h2>Header</h2>
    </div>
    <div class="content">
      <ul>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
        <li>Asdf</li>
      </ul>
    </div>
  </div>
</div>