1

我正在尝试实现一个简单的视图。该视图由顶视图和底视图组成。

顶部是静态且无趣的。

底部将包含溢出该组件边界的内容。在这种情况下，我希望它显示滚动溢出。

这大致是我想要的样子（gif 屏幕录制）

问题是我的布局是在 CSS 网格中构建的。不要问为什么，这不是要改变的。也可以使用视口单位。

如果您阅读下面的代码，布局大致转换为：

“创建两行。第一行将具有定义的高度。第二行将填充剩余的可用空间”

虽然这在底行的内容很小时有效，但当底行的内容溢出时它会中断。具体来说，它会扩展 .bottomRow 的大小，并且组件会离开屏幕而不会溢出。

这是说明此行为的屏幕录像

这里发生的情况是，您看到的蓝色 div 的高度与其子元素的溢出大小相匹配。我希望它保持它的大小，而不是溢出。

到目前为止，这是我的代码（这不完全是屏幕录像中的代码。只是要领）

.layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: max-content auto / 1fr
}

.topRow {
    height: 50px;
    width: 100%
}

.bottomRow {
    width: 100%;
    height: 100%;
    /* max-height: ???; works if set to a static value */
    box-sizing: border-box;
    border: 5px solid black;
    overflow-y: auto;
}

<div class='layout'>
   <div class='topRow'/>
   <div class='bottomRow'>
   // ENOUGH CONTENT TO OVERFLOW
   </div>
</div>

我能够成功实现这一点的唯一方法是设置最大高度。

看录屏

但是为了使这个动态化，我必须添加一个事件监听器来调整组件大小。不理想！

我也尝试过使用max-height: -webkit-fill-available，虽然这适用于 Chrome，但它不适用于其他主要浏览器。

请帮忙！总的来说，我正在尝试找到一种避免使用 3rd 方库、JavaScript、事件侦听器并且跨浏览器兼容的解决方案。

4

0 回答 0