有没有一种方法可以使div在溢出时在绝对定位的div内滚动?

时间:2019-07-11 22:15:31

标签: css

我正在尝试通过设置最大高度百分比和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的高度?

1 个答案:

答案 0 :(得分:0)

您需要将height添加到父元素(.second)中,以便.content从中计算自己的height。请记住,height值逐渐下降。如果您希望元素具有相对的height,则需要在其层次结构中的某个位置固定height,在目标元素和具有以下内容的元素之间将 each 元素固定的height也有相对的height

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

.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>