Question

我正在尝试仅在子div中设置滚动。我使用overflow-y: hidden;为父div修复了高度，但使用overflow-y: scroll;滚动了更高的子div。

但是，它显示了通过子div的Y轴的禁用滚动条。如何才能使用CSS才能使其工作？如果没有，是否有任何jQuery方式？

以下是我目前使用的代码：

<div class="parent">
    <div class="child">
        <!-- Content -->
    </div>
</div>

而且，CSS：

.parent {
  display: block;
  height: 1000px;
  padding: 10px;
  overflow-y: hidden; /* So that the child doesn't break layout */
  width: 400px;
}
.child {
  border: 1px solid #AAAAAA;
  display: block;
  height: 1500px;
  padding: 5px;
  overflow-y: scroll; /* Make the child scroll */
  width: 100%;
}

Answer 1

问题是孩子没有溢出。您正在使高度达到1500px，因此父级已经溢出，因为孩子的身高是1500px。如果您使用height:100%替换高度，请将overflow-y:scroll更改为overflow:auto，并添加内容以使其溢出it works properly，就像拥有它一样

附注：

对于div，不需要声明display:block，因为它与元素类型是天生的
您应该在宽度或高度为100％的元素上使用box-sizing: border-box，并且父级具有填充，以使它们占据宽度或高度的100％减去填充

仅滚动子元素

1 个答案: