css - 在网格容器内保持 100vh 溢出的问题

Question

我正在尝试实现一种没有滚动页面的仪表板。我有一个网格布局，其中一些部分的高度为 100vh。问题是在这些部分中，我希望子 div 在它们大于父容器的 100% 时溢出，但它们正在扩展其内容而不是溢出。

这是HTML：

<div class="page-holder w-100 p-5">
    <div class="grid-container">
        <section class="item1">
            <div class="card">
                <div class="card-header">Section</div>
                <div class="card-body">
                    <p>Here some content fixed</p>
                    <p>Below the overflow content with max-height 100%</p>
                    <div class="content-overflow">
                        <div class="row">
                            <div class="col-md-12">
                                <p>Row</p>
                            </div>
                        </div>
                        ....
                    </div>
                </div>
            </div>
        </section>
        <section class="item2">
            <div class="card">
                <div class="card-header">Section</div>
                <div class="card-body">
                    <div class="content-overflow">
                        <div class="row">
                            <div class="col-md-12">
                                <p>Row</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p>Row</p>
                            </div>
                        </div>
                        ...
                    </div>
                </div>
            </div>
        </section>
        <section class="item3">
            <div class="card">
                <div class="card-header">Section</div>
                <div class="card-body">
                    <div class="content-overflow">Empty Content</div>
                </div>
            </div>
        </section>
    </div>

这是CSS：

.page-holder {
  height: calc(100vh - 40px);
  ...
}

.grid-container {
  display: grid;
  ...
  height: 100%;
}

section, section > .card {
  height: 100%;
}

.content-overflow {
  overflow-y: auto;
  heigth: 100%; /* Not working - it only overflows if I set height on px */
  background: blue;
  color: white;
}

您可以在下面的CodePen中看到完整的代码。

标签： cssheightoverflowcss-grid

Answer 1

我解决了将以下内容添加到网格容器的问题：

 grid-template-rows: 1fr 1fr;
 grid-template-columns: 1fr 1fr;