Question

情况

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

问题

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

代码

我花了10分钟的时间尝试获取HTML代码段，以无济于事处理我的网站代码，因此，我将提供指向损坏页面的链接：

http://hbms.me/#/music

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

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

Answer 1

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

List<String> lst = Stream.of(myWords).filter( s->s.length()>3).collect(Collectors.toList());

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：网格行的内容正在页面溢出

3 个答案: