使div可滚动不在div中滚动

debugcn 发表于 Dev

杰西卡（Jessica）

我试图使特定的div可滚动而不使整个页面滚动。页面中有不同的元素。滚动div没有定义的高度，但是其高度应基于其内容。这是布局：

我尝试了很多事情：

添加溢出：自动/滚动到滚动div并赋予其100％的高度
使滚动div成为绝对位置

似乎没有任何作用。如何在不给内部高度px的情况下使内部div可滚动？

追

您需要一些规则将固定高度或最大高度强加到元素上，以确保其达到要滚动的点。然后，您可以添加overflow-y: scroll样式。方框3的示例：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 15vw);
  grid-template-rows: repeat(3, 25vh);
  justify-content: center;
  align-content: end;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.item1 {
  grid-column: 1 / 5;
}

.item2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.item3 {
  grid-column: 3 / 5;
  overflow-y: scroll;
}

<div class="wrapper">
    <div class="box item1">One</div>
    <div class="box item2">Two</div>
    <div class="box item3">
      Three Three Three Three Three Three Three Three Three 
    </div>
    <div class="box item4">Four</div>
    <div class="box item5">Five</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。