Question

我希望有三个垂直堆叠的div。

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

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

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

这是一个图表：

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

当第三个div扩展时，我无法让第二个（中间div）缩小。如果可能的话，我想在没有js的情况下实现这一点。

Answer 1

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

Answer 2

*见下面的小提琴

额外的页脚CSS：

public class Scaling : MonoBehaviour { 
public float speed = 0.1f; // speed of resizing


BoxCollider myCollider = transform.GetComponent<BoxCollider> (); // get component of box collider
myCollider.size = new Vector3(3,3,3); // resize collider  - problematic line


private Vector3 targetScale = new Vector3(30,1,1); // sarget scale for object

void Start() {}

void Update() {
    transform.localScale = Vector3.Lerp (transform.localScale, targetScale, speed * Time.deltaTime); // object resizing
}

这就是你想要的吗？

修改

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部分不是必需的，我已经将它添加到示例中以使其更长寿。

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

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

3 个答案: