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

Question

无 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% height/width 屏幕上测试响应式网站。

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

使用 jQuery 我知道如何计算高度来放置所有这些但没有使用任何人有任何想法吗？

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

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

Answer 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>

Answer 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>

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

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

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

Fix chatbox to bottom, or adapt height to content

css

flexbox

responsive-design

adaptive-layout

相对页眉和页脚

固定页眉和页脚