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

Three vertically stacked Divs, dynamic height

本文关键字：Div 动态 高度 三个 垂直      更新时间：2023-09-26

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

第一个div位于顶部，它的固定高度为60px。

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

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

这是一张图：

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

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

CSS Tricks： A Guide to Flexbox with max-height.

*请参阅下面的新小提琴

附加页脚 CSS：

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

这就是你要的吗？

编辑：

新小提琴

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

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

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部分不是必需的，我已将其添加到示例中以使其更具生命力。

它在文本条目上附加"Enter"键的侦听器，并使用文本在内容框中创建新的"消息"。实际布局都是在CSS中完成的。

相关文章：