将聊天框固定到底部，或根据内容调整高度答案

【问题标题】：Fix chatbox to bottom, or adapt height to content将聊天框固定到底部，或根据内容调整高度
【发布时间】：2017-01-27 09:56:29
【问题描述】：

没有 JS，只有 CSS，允许 flexbox

JsFiddle : https://jsfiddle.net/ex9fmqxv/

.mdl-layout
 .mdl-layout__inner-container
   .mdl-layout__header
   .mdl-layout__drawer
   .mdl-grid
    .mdl-cell
      ul (list-msg adaptive height)
      div (chat box fixed to bottom)
   .mdl-grid (user list)

我正在尝试使用 GMD 反应在屏幕的 100% 高度/宽度中对响应式网站进行测试。

我希望每次调整窗口大小时，它都可以重新计算内容的高度，并像 Slack.com 一样适应这个。

使用 jQuery 我知道如何计算高度来把这一切都很好但没有使用任何人有任何想法吗？

在图片中你可以看到我想要的自动计算。

如果您对聊天栏有其他解决方案仍然是页脚并且中心内容是可滚动的，我很感兴趣。

【问题讨论】：

I would like every time we resize the window, it can recalculate the height of the content and adapt to this one like Slack.com. 这需要 JS。但是你问了一个 CSS 解决方案。 CSS 无法根据事件触发（如调整大小）计算任何内容。对不起。
Slack 使用 JavaScript。
我知道 Slack 使用 JS，但我想知道是否可以不用

标签： css responsive-design flexbox adaptive-layout

【解决方案1】：

您可以使用flexbox 和viewport units 来做到这一点。

视口单位类似于百分比，50vh 等于视口高度的 50%。

这是一个用于演示目的的最小示例。

相对页眉和页脚

页眉 (13vh) + 主 (74vh) + 页脚 (13vh) = 100vh（100% 视口高度）

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex-basis: 74vh;
  overflow-y: auto;
  background-color: rgba(162, 196, 162, 0.5);
}
header,
footer {
  flex-basis: 13vh;
  background-color: rgba(162, 192, 232, 0.5);
}

<header>
  Header
</header>
<main>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
</main>
<footer>
  Footer
</footer>

固定页眉和页脚

使用calc() 从完整视口高度中减去固定高度的总和，以设置可变高度元素。

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex-basis: calc(100vh - 200px);
  overflow-y: auto;
  background-color: rgba(162, 196, 162, 0.5);
}
header,
footer {
  flex-basis: 100px;
  background-color: rgba(162, 192, 232, 0.5);
}

<header>
  Header
</header>
<main>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
  <p>
    Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
  </p>
</main>
<footer>
  Footer
</footer>

【讨论】：

你应该向他展示如何使用弹性盒，因为它们是这里的终极解决方案。
也许，这可能是一个涉及的话题。
嗯，vh 方法很好，但不能在所有屏幕上工作，除非与媒体查询一起使用。而且 calc 比 flexbox 更兼容，但是您必须针对上下文中的每个元素进行特定的处理，并且您必须始终编辑所有涉及的部分，而在 flexbox 中您只能编辑您想要的部分，其余部分将被计算出来。而且由于 OP 使用的是 Material Design，他只想要 IE9 之前的兼容性，即 flexbox 可以提供。
@Akxe 谢谢你的详细信息，我很幸运不用担心 IE9，所以它应该可以运行，我知道如何使用 flexboxes 属性，但我没想过会这样使用它
@hungerstar 谢谢！我刚刚通过 vh 而不是 px 更改了我的 height:calc() 值，它起作用了！

【解决方案2】：

我会说 flexbox 方法是这种情况下的更好选择。下面是一个例子：

*,*:after,*:before{
  box-sizing: border-box;
}

body{margin:0}

main{
  width: 100%;
  height: 200px;
  max-height: 200px;
  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

section{
  width: 100%;
  overflow-y: scroll;
  background-color: red;
  flex: 1 auto;
  height: 100%;
}

.input{
  width: 100%;
  flex: 0 0 auto;
  background-color: green;
}

textarea{
  width: 100%;
  max-width: 100%;
}

<main class="flex parent">
  <section class="red">
    <ul>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
      <li>Chat bubble</li>
    </ul>
  </section>
  <div class="input green">
    <textarea>Try resiring me!</textarea>
  </div>
</main>

警告您可以使用 textarea 调整大小来操作 textarea 部分，手动使用它很奇怪，因为向下的鼠标移动会导致框向上生长。这应该可以通过在使用 onchange 事件添加/删除新文本行时使其不调整大小和编辑文本框的高度来解决。

但是为了测试，我保留了它，因为它很好地展示了 flexbox 可以做什么。

【讨论】：