三个垂直堆叠的 Div，动态高度

Question

我想要三个垂直堆叠的 div。

第一个div在顶部，固定高度为60px。

中间的div可能包含也可能不包含内容，它通常会包含垂直大于它的内容，因此设置为overflow: auto。不管它是否包含内容，它都必须消耗窗口的剩余高度减去第一个 div 的高度和最后一个 div 的高度。

最后一个 div 的最小高度为 40 像素。这个 div 接受用户输入，并且可以有 400px 之间的高度。当用户输入文本时，这个 div 会向上扩展，一旦达到最大高度，它就会滚动。

这是一个图表：

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|          ^|
|  Footer  ||
|          v|
+-----------+

随着第三个 div 的扩展，我无法让第二个（中间 div）缩小。如果可能的话，我想在没有 js 的情况下完成这个。

Answer 1

CSS Tricks: A guide to Flexbox 与最大高度组合。

Answer 2

*见下面的新小提琴

附加页脚 CSS：

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 400px; 
  background: #efefef;
}

这就是你想要的吗？

编辑：

NEW FIDDLE

Answer 3

我之前实际上已经为聊天客户端实现过类似的功能。我手头没有，但这是它的要点！我添加了一些样式细节和文本输入机制，以便您了解它的工作原理。

恐怕它不会使中间部分缩小，但它确实看起来变小了。当页脚随其文本展开时，它会延伸到中间块的顶部。

var inputBox = document.getElementsByClassName("footer")[0];
var contentBox = document.getElementsByClassName("content")[0];

inputBox.addEventListener('keydown', function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        createMessage(inputBox.textContent);
        inputBox.textContent = "";
    }
}, false);

function createMessage (str) {
     var message = document.createElement('div');
     message.style.cssText = "background: #3AF; padding: 10px; border-radius: 5px; margin: 10px 0; color: white;";
     message.textContent = str;
     contentBox.appendChild(message);
}

createMessage("Sent messages appear here!")
createMessage("Type a message in the footer and press enter to send")
createMessage("This list will become scrollable if there is enough content")
createMessage("The text entry will also dynamically resize as you type")

/* border box reset, as per http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/*
  base container class, height can be relative or absolute (but it must have height
  requires position relative or absolute so we can position the header and footer
  finally requires vertical padding the same height as the the header/footer
*/

.container {
  height: 600px;
  background-color: rgb(220, 220, 220);
  position: relative;
  padding: 50px 0;
}
/*
  header class, must have a height and width
  should be top 0 and left 0 so that it positions inside the containers padding
  must be positioned absolute
*/

.container .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgb(120, 120, 120);
  text-align: center;
  line-height: 30px;
  padding: 10px;
  color: white;
  font-size: 22px;
}
/*
  content box, the easiest really
  height to 100% (so it will be the container minus the padding, which the header/footer sits in)
  overflow-y: auto; so if we exceed the size of the content box we scroll instead
*/

.container .content {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}
/*
  positioned absolutely again, but bottom left this time.
  use min height to specify the basic height then as the user types it will grow accordingly
  set max-height to prevent it growing too tall, overflow: auto; again so we can scroll in that situation
  VERY IMPORTANTLY MUST HAVE THE CONTENT EDITABLE FLAG ON THE HTML ELEMENT
*/

.container .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 50px;
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
  background-color: rgb(120, 120, 120);
  padding: 15px;
  line-height: 20px;
  color: white;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="content"></div>
  <div class="footer" contenteditable></div>
</div>

JS 部分不是必需的，我已将其添加到示例中以赋予它更多生命。

它为文本条目上的“输入”键附加了一个侦听器，并使用该文本在内容框内创建一个新的“消息”。实际的布局都是用 CSS 完成的。