CSS: 网格行的内容溢出页面

Question

情况

在我的网站上，我有一个页面供人们收听我的音乐。该页面有一个包含 3 行的网格元素：#music-header、#playlist 和 #player。 music-header（页眉）和播放器（页脚）的高度为 60px，内容高度由 1fr 值动态确定。

问题

当播放列表加载歌曲时，它会溢出页面。我在 #playlist 上设置了 overflow-y: scroll，但没有产生任何结果。

代码

我尝试了 10 分钟让 HTML 片段来处理我网站的代码但无济于事，所以我将向损坏的页面提供 link：

http://hbms.me/#/music

您会注意到歌曲列表溢出了页面。该列表应包含在 #content 框中。

注意：我目前正在使用 Firefox 查看页面。

Answer 1

在 style.css 第 31 行检查并应用此 css，这将解决您的问题。

#playlist {
    overflow-y: scroll;
    height: 544px;
}

Answer 2

一个不理想的解决方案是使用 javascript:

setInterval(() => {
  // get height of #content
  // subtract by 120 (the header and footer are both 60px)
  // set #playlist height to resulting value
});

但是，唉，那是极其低效的。

Answer 3

溢出属性仅在您设置最大高度时有效。因此，您需要使用媒体查询或 Js 为播放列表容器设置高度。否则，您必须重构代码以带来预期的视图。

CSS: 网格行的内容溢出页面

CSS: The content of a grid row is overflowing the page

html

css

overflow

css-grid