当网格项与末端/底部对齐时，滚动不起作用

2024-03-30

我想使用创建聊天CSS grid并遇到了我无法合并的问题align-self: end; and overflow-y: auto;.

The ul包含所有消息并且应该与底部对齐，这样即使只有一条消息，它也会出现在底部。

聊天的页眉和页脚是固定的，您只需滚动浏览消息（如 Whats App 和类似的应用程序）。

我创建this pen https://codepen.io/MichaelZ_dev/pen/oqdoRQ有一些消息。消息通过标题，它永远不允许我滚动。

html,
body {
  margin: 0;
  height: 100%;
}

#chat {
  display: grid;
  height: inherit;
  grid-template-rows: 50px auto 50px;
}

header,
footer {
  background: #4081ff;
}

ul {
  overflow-y: auto;
  align-self: end;
}

<section id="chat">
  <header>header</header>
  <ul>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>last message</li>
  </ul>
  <footer>footer</footer>
</section>

这似乎是一个错误。

Analysis

您正在使用align-self: end固定中间网格项目（ul) 到行的底部。这无法呈现垂直滚动条。

我尝试了各种替代方案：

我做了ul网格项目是一个弹性容器flex-direction: column and justify-content: flex-end.
我做了ul网格项目是一个弹性容器flex-direction: column并应用了margin-top: auto到第一个li弹性项目。

我尝试从

grid-template-rows: 50px auto 50px

grid-template-rows: 50px 1fr 50px

什么都没起作用。在所有情况下，浏览器都无法生成垂直滚动条。

但是，在所有情况下，当没有“结束”对齐时（换句话说，网格项与默认的“开始”位置对齐），垂直滚动效果很好。

因为滚动条在“开始”时有效，但在“结束”时失败，所以我认为将其称为错误是公平的。

Flexbox 中也存在同样的问题：无法使用 justify-content: flex-end 获得垂直滚动条 https://stackoverflow.com/q/41863033/3597276

解决方案#1：仅限 Chrome

如果您使ul网格项（嵌套）网格容器align-content: end，这似乎适用于 Chrome，但不适用于 Firefox 和 Edge。我没有在Safari、IE11或其他浏览器中进行测试。

#chat {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
}

ul {
  overflow-y: auto;
  display: grid;
  align-content: end;
}

header,
footer {
  background: #4081ff;
}

body {
  margin: 0;
}

<section id="chat">
  <header>header</header>
  <ul>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>last message</li>
  </ul>
  <footer>footer</footer>
</section>

修改后的代码笔 https://codepen.io/anon/pen/rdKJdE?editors=1100

解决方案#2：所有浏览器

该解决方案利用了垂直滚动可以很好地处理项目中的事实start位置。您可以插入另一个li或者，更好的是，伪元素（因为它们在应用于网格容器时被视为网格项）。这li将为空并设置为占据所有可用空间，这会将实际项目固定在底部。

#chat {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px auto 50px;
}

ul {
  overflow-y: auto;
  display: grid;
  grid-template-rows: 1fr; /* applies to the first row, the only explicit row;
                              all subsequent rows, which are implicit rows, will
                              take `grid-auto-rows: auto` by default */
}

ul::before {
  content: "";
  border: 1px dashed red; /* demo only */
}

header,
footer {
  background: #4081ff;
}

body {
  margin: 0;
}

<section id="chat">
  <header>header</header>
  <ul>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>Message 1</li>
    <li>last message</li>
  </ul>
  <footer>footer</footer>
</section>

修改后的代码笔 https://codepen.io/anon/pen/RMJQvZ

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)