scrollable div溢出其父级而不是滚动

时间：2018-03-18 01:32:13

标签： css

我有一些固定宽度的卡片，可以长到最大高度。每张卡片都包含一个项目列表，如果卡片已达到其最大高度，则该列表应该是可滚动的：

<div class="card">
  <div class="card-header">
    <h3>
      Header
    </h3>
  </div>
  <div class="card-body">
    <h5>Title</h5>
    <div class="scroll-view">
      <ul>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
      </ul>
    </div>
    <h5>Footer</h5>
  </div>
</div>


.card {
  margin: 1rem;
  width: 12em;
  max-height: 24rem;
  background-color: white;
  border: 1px solid aliceblue;
  display: flex;
  flex-direction: column;
}

.card-header {
  background-color: gray;
}

.card-body {
  height: 100%;
  padding: 1rem;
}

.scroll-view {
  overflow-y: auto;
  overflow-x: hidden;
}

不幸的是，最终发生的事情是，一旦有足够的物品超过最大高度，它们就会溢出卡片末端而不是滚动：https://jsfiddle.net/wg4160fh/21/

如何防止这种情况发生？

1 个答案:

答案 0 :(得分：0)

你不应该真正需要.scroll-view内的.card-body div。但是如果你想保持页脚完整，你需要在.scroll-view上定义一个高度以隐藏任何内容。

您还可以使用overflow-y: scroll上的overflow: scroll或card-body来删除.scroll-view

使用.scroll-view

上定义的高度的示例

＆＃13;
＆＃13; 
.card {
  margin: 1rem;
  width: 12em;
  max-height: 24rem;
  background-color: white;
  border: 1px solid aliceblue;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

.card-header {
  background-color: gray;
}

.card-body {
  height: 100%;
  padding: 1rem;
      overflow: scroll;
}

.scroll-view {
  background: Teal;
}
＆＃13; 
<div class="card">
  <div class="card-header">
    <h3>
      Header
    </h3>
  </div>
  <div class="card-body">
    <h5>Title</h5>
    <div class="scroll-view">
      <ul>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
        <li>An item</li>
      </ul>
    </div>
  </div>
  <div class="card-footer">
    <h5>Footer</h5>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

修改

我明显错过了卡片高度（对不起）。但您只需将overflow:scroll属性添加到.card元素即可。我已经更新了这个例子。

编辑2

我已更新了代码段以将溢出放在.card-body上并将页脚区域移动到单独的div。

相关问题
最新问题