在网格容器内保持 100vh 溢出的问题答案

【问题标题】：Issues keeping 100vh inside grid container overflow在网格容器内保持 100vh 溢出的问题
【发布时间】：2021-05-21 12:20:03
【问题描述】：

我正在尝试实现一种没有滚动页面的仪表板。我有一个网格布局，其中一些部分的高度为 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看到完整的代码。

【问题讨论】：

尝试min-height: 0;到你的部分，哎呀没看到，你有一个类型heigth: 100%; /* Not working */

标签： css height overflow css-grid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我不确定你想要达到什么目的，但也许这会奏效：

.content-overflow {
 overflow-y: auto;
 height: 100vh;
 background: blue;
 color: white;
}

或者你也可以max-height:

.content-overflow {
 overflow-y: auto;
 max-height: 100vh;
 background: blue;
 color: white;
}

我还建议用overflow-x: hidden 去掉 x 溢出

【讨论】：

我添加了一个草图，试图解释我想要实现的目标。我希望这会有所帮助，因为你的想法没有奏效。

【解决方案3】：

你应该给你的 card-body 类添加 overflow:auto

【讨论】：