我想使用 CSS grid
创建聊天,但遇到了无法组合 align-self: end;
和 overflow-y: auto 的问题;
。
ul
包含所有消息并且应该与底部对齐,这样即使只有一条消息,它也会出现在底部。
聊天的页眉和页脚是固定的,您只能滚动浏览消息(例如 Whats App 和类似的应用程序)。
我创建了 this pen一些消息。消息通过标题,它永远不允许我滚动。
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>
最佳答案
这似乎是一个错误。
分析
您正在使用 align-self: end
将中间网格项 (ul
) 固定到行的底部。这无法呈现垂直滚动条。
我尝试了多种选择:
我将
ul
网格项制作成一个带有flex-direction: column
和justify-content: flex-end
的 flex 容器.我将
ul
网格元素制作成带有flex-direction: column
的 flex 容器,并将margin-top: auto
应用于第一个li
flex 元素。我尝试从
切换grid-template-rows: 50px auto 50px
到
grid-template-rows: 50px 1fr 50px
没有任何效果。在所有情况下,浏览器都无法生成垂直滚动条。
但是,在所有情况下,当没有“结束”对齐时(换句话说,网格项与默认的“开始”位置对齐),垂直滚动都可以正常工作。
因为滚动条在“开始”时有效但在“结束”时失败,我认为将其称为错误是公平的。
在 flexbox 中有同样的问题:Can't get vertical scrollbar with justify-content: flex-end
解决方案 #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>
解决方案 #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>
关于css - 当网格元素与末尾/底部对齐时滚动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49598338/