网格项与末尾对齐时滚动不起作用 [英] Scroll doesn't work when grid item aligned to the end / bottom

问题描述

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

I want to create a chat using CSS grid and ran into the problem that I cannot combine align-self: end; and overflow-y: auto;.

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

The ul holds all the messages and should be aligned to the bottom, so that even when there is only one message, it appears on the bottom.

聊天的页眉和页脚是固定的，您只能滚动浏览消息(例如Whats App和类似的应用程序).

The header and the footer of the chat are fixed and you only scroll through the messages (like Whats App and similar applications).

我用一些消息创建了 这支笔 .邮件经过标题，并且永远不允许我滚动.

I created this pen with some messages. The messages go through the header and it never allows me to scroll.

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>

推荐答案

我的滚动条解决方案.我添加了其他div.

My solution with scrollbar. I added additional div.

https://codepen.io/anon/pen/zWaRJY

<section id="chat">
  <header>header</header>
  <div id="content">
  <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>
  </div>
  <footer>footer</footer>
</section>

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

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

header, footer {
  background: #4081ff;
}

#content {
  overflow-y: auto;
}

ul {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 100%;
  margin: 0;
}

这篇关于网格项与末尾对齐时滚动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！