时间戳

首页 > 解决方案 > 滚动不适用于 Flex align-self 和 viewheight

html - 滚动不适用于 Flex align-self 和 viewheight

问题描述

我尝试为聊天之类的东西创建一个模板。我想在 div 的底部显示文本，为什么我使用flex和flex-end子父级。但是一旦我这样做，我的滚动功能就会中断。

https://jsfiddle.net/e1n7pc42/1/

我听说我的 jsfiddle 不工作，所以这里是我的代码：


<div class="header">
  <div class="output">
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
  </div>   
</div>


<div class="main"></div>



.header {
  background-color: yellow;
  height: 70vh;
  overflow-y: scroll;
  display: flex;
}

.output {
    align-self: flex-end;
}

.main {
  background-color: orange;
  height: 20vh;
}

标签： htmlcss

解决方案

添加边距顶部：自动；将在这里提供帮助。

.header {
  background-color: yellow;
  height: 70vh;
  overflow-y: scroll;
  display: flex;

}

.output {
    align-self: flex-end;
    margin-top: auto;

}

.main {
  background-color: orange;
  height: 20vh;
}§
<div class="header">
  <div class="output">
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
  </div>   
</div>


<div class="main"></div>

推荐阅读